updates to font choices, color scheme
This commit is contained in:
Tristan Smith
parent
07c6df421b
commit
4fef75fccf
7 changed files with 57 additions and 6 deletions
|
|
@ -4,6 +4,8 @@
|
|||
<title>About Bethany - WillowMeCreations</title>
|
||||
<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">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kalnia">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
<title>Contact Us - WillowMeCreations</title>
|
||||
<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">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kalnia">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
<title>Willow Me Creations</title>
|
||||
<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">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kalnia">
|
||||
</head>
|
||||
|
||||
<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 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>
|
||||
<button onclick="topFunction()" id="myBtn" title="Go to top">Go to top</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="footer">
|
||||
|
|
@ -109,6 +112,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -4,6 +4,8 @@
|
|||
<title>Contact Us - WillowMeCreations</title>
|
||||
<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">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kalnia">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
<title>Products - WillowMeCreations</title>
|
||||
<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">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kalnia">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
|
|
|||
19
script.js
19
script.js
|
|
@ -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
32
style.css
|
|
@ -1,9 +1,9 @@
|
|||
|
||||
|
||||
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 */
|
||||
font-family: Arial, sans-serif;
|
||||
font-family: Kalnia, 'Times New Roman', Times, serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ body {
|
|||
}
|
||||
|
||||
h1, h2 {
|
||||
color: #800080; /* purple */
|
||||
color: #333333; /* dark grey */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -31,16 +31,16 @@ p {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #006400; /* dark green */
|
||||
color: #000080; /* dark blue */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #800080; /* purple */
|
||||
color: #800000; /* maroon */
|
||||
}
|
||||
|
||||
.fab {
|
||||
color: #006400; /* dark green */
|
||||
color: #000080; /* dark blue */
|
||||
}
|
||||
|
||||
.card img {
|
||||
|
|
@ -58,4 +58,24 @@ a:hover {
|
|||
.header, .topnav {
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in a new issue