color palette
This commit is contained in:
Tristan Smith
parent
03490d2897
commit
e5dd8fed4c
10 changed files with 655 additions and 60 deletions
|
|
@ -53,6 +53,7 @@
|
|||
<p>For Bethany, WillowMeCreations is more than just a business; it's a reflection of her passion,
|
||||
creativity, and the warmth she wishes to share with the world.</p>
|
||||
</div>
|
||||
<img src="img/creator.jpg" alt="Bethany Rhodes" class="creator">
|
||||
</section>
|
||||
|
||||
<section class="contact">
|
||||
|
|
@ -73,8 +74,7 @@
|
|||
</div>
|
||||
<div class="social-media">
|
||||
<h2>Follow Me</h2>
|
||||
<a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
<a href="https://facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
|
||||
<a href="https://www.instagram.com/willowmaker33" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
<a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -76,8 +76,7 @@
|
|||
</div>
|
||||
<div class="social-media">
|
||||
<h2>Follow Me</h2>
|
||||
<a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
<a href="https://facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
|
||||
<a href="https://www.instagram.com/willowmaker33" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
<a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -77,8 +77,7 @@
|
|||
</div>
|
||||
<div class="social-media">
|
||||
<h2>Follow Me</h2>
|
||||
<a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
<a href="https://facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
|
||||
<a href="https://www.instagram.com/willowmaker33" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
<a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
BIN
img/booth.jpg
Normal file
BIN
img/booth.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
img/creator.jpg
Normal file
BIN
img/creator.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
|
|
@ -127,7 +127,7 @@
|
|||
<p>Brighten up cloudy days!</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="products.html" class="productbtn">View All Products</a>
|
||||
<p><a href="products.html" class="productbtn">View All Products</a></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -149,8 +149,7 @@
|
|||
</div>
|
||||
<div class="social-media">
|
||||
<h2>Follow Me</h2>
|
||||
<a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
<a href="https://facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
|
||||
<a href="https://www.instagram.com/willowmaker33" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
<a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,15 +30,14 @@
|
|||
<section class="news">
|
||||
<div class="container">
|
||||
<h2>News</h2>
|
||||
<h3>Latest News</h3>
|
||||
<img src="img/summer_news.jpg" class="news" alt="summer crochet">
|
||||
<img src="img/booth.jpg" class="news-header" alt="booth shot">
|
||||
<h2>Greetings, fellow yarn enthusiasts!</h2>
|
||||
<p>We're excited to share some delightful updates from the sunny world of WillowMeCreations.</p>
|
||||
|
||||
<h3>Website updates </h3>
|
||||
<p>Realistically Bethany is only one person and I'm only one person making this website. I've gone through and updated backend parts of it to work more efficently without changing much on the frontend side...yet</p>
|
||||
<p>I moved the website from its previous host to my new, self-hosted approach which allows me to have a more dynamic approach to this site. That said, the contact form now works properly and emails will be received.</p>
|
||||
<p>All code for this site is licensed under the GPL and can be viewed <a href="https://git.monotreme.org/tristan/willowmecreationsV2/">here</a>.</p>
|
||||
<p>All code for this site is licensed under the MIT license and can be viewed <a href="https://git.monotreme.org/tristan/willowmecreationsV2/">here</a>.</p>
|
||||
|
||||
<p>Thank you for being a part of the WillowMeCreations family. Your support fuels our passion for
|
||||
crafting and creativity. Keep an eye on our website and social media for more updates, events, and
|
||||
|
|
@ -67,8 +66,7 @@
|
|||
</div>
|
||||
<div class="social-media">
|
||||
<h2>Follow Me</h2>
|
||||
<a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
<a href="https://facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
|
||||
<a href="https://www.instagram.com/willowmaker33" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
<a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -62,8 +62,7 @@
|
|||
</div>
|
||||
<div class="social-media">
|
||||
<h2>Follow Me</h2>
|
||||
<a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
<a href="https://facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
|
||||
<a href="https://www.instagram.com/willowmaker33" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
<a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
75
style.css
75
style.css
|
|
@ -1,11 +1,13 @@
|
|||
/* Base styles */
|
||||
:root {
|
||||
--primary-color: #333;
|
||||
--secondary-color: #FFD700;
|
||||
--background-color: #FAF3E0;
|
||||
--text-color: #333;
|
||||
--header-bg-color: #888;
|
||||
--primary-color: #F4ACB7;
|
||||
--secondary-color: #ffffff;
|
||||
--background-color: #4F5D2F;
|
||||
--text-color: #dddddd;
|
||||
--header-bg-color: #f4acb7ce;
|
||||
--white: #fff;
|
||||
--box-bg-color: #6c464ec5;
|
||||
--footer-text-color: #3d282cc5;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -49,8 +51,8 @@ h1, h2, h3 {
|
|||
width: 150px;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
border: 2px solid var(--white);
|
||||
box-shadow: 0 0 10px #9b9b9b;
|
||||
border: 2px solid var(--box-bg-color);
|
||||
box-shadow: 0 0 35px var(--background-color);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
|
|
@ -59,7 +61,7 @@ h1, h2, h3 {
|
|||
position: relative;
|
||||
width: 600px;
|
||||
height: 50px;
|
||||
background-color: #e2ce977c; /* Slightly darker background */
|
||||
background-color: #4F5D2F; /* Slightly darker background */
|
||||
border-radius: 8px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
|
@ -109,35 +111,35 @@ a:nth-child(5) {
|
|||
.topnav a:nth-child(1):hover~.animation {
|
||||
width: 120px;
|
||||
left: 0;
|
||||
background-color: #429b92; /* Calming teal to match earthy tones */
|
||||
background-color: #4F5D2F; /* Calming teal to match earthy tones */
|
||||
}
|
||||
|
||||
.topnav .start-about,
|
||||
.topnav a:nth-child(2):hover~.animation {
|
||||
width: 120px;
|
||||
left: 120px;
|
||||
background-color: #7ea580; /* Light green, subtle and soft */
|
||||
background-color: #5c6842; /* Light green, subtle and soft */
|
||||
}
|
||||
|
||||
.topnav .start-news,
|
||||
.topnav a:nth-child(3):hover~.animation {
|
||||
width: 120px;
|
||||
left: 240px;
|
||||
background-color: #7d9264; /* Very light green, keeping it soft */
|
||||
background-color: #7d9264c2; /* Very light green, keeping it soft */
|
||||
}
|
||||
|
||||
.topnav .start-products,
|
||||
.topnav a:nth-child(4):hover~.animation {
|
||||
width: 120px;
|
||||
left: 360px;
|
||||
background-color: #773d81; /* Muted purple to go with crochet theme */
|
||||
background-color: #5c6842; /* Muted purple to go with crochet theme */
|
||||
}
|
||||
|
||||
.topnav .start-contact,
|
||||
.topnav a:nth-child(5):hover~.animation {
|
||||
width: 120px;
|
||||
left: 480px;
|
||||
background-color: #d3a764; /* Muted peach for a warm touch */
|
||||
background-color: #4F5D2F; /* Muted peach for a warm touch */
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
|
|
@ -230,11 +232,43 @@ a:nth-child(5) {
|
|||
}
|
||||
|
||||
/* Sections */
|
||||
|
||||
.news-header {
|
||||
width: 75%;
|
||||
border-radius: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 40px; /* Space between text and image */
|
||||
max-width: 1200px; /* Set a max width for the whole container */
|
||||
margin: 0 auto; /* Center the container */
|
||||
}
|
||||
|
||||
#bio {
|
||||
flex: 3; /* Text container takes 3/4 of the space */
|
||||
}
|
||||
|
||||
.creator {
|
||||
flex: 1; /* Image container takes 1/4 of the space */
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.about p {
|
||||
text-align: center; /* Ensure the text is left aligned */
|
||||
}
|
||||
|
||||
.about,
|
||||
.products,
|
||||
.contact,
|
||||
.news {
|
||||
padding: 60px 0;
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -258,6 +292,13 @@ a:nth-child(5) {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.about p a,
|
||||
.products p a,
|
||||
.contact p a,
|
||||
.news p a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Product Grid */
|
||||
.product-grid {
|
||||
display: flex;
|
||||
|
|
@ -267,7 +308,7 @@ a:nth-child(5) {
|
|||
}
|
||||
|
||||
.product-card {
|
||||
background-color: var(--white);
|
||||
background-color: var(--box-bg-color);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -313,13 +354,13 @@ a:nth-child(5) {
|
|||
/* Footer */
|
||||
.footer {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--white);
|
||||
color: var(--footer-text-color);
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer .social-media a {
|
||||
color: var(--secondary-color);
|
||||
color: var(--header-bg-color);
|
||||
margin: 0 10px;
|
||||
font-size: 1.5em;
|
||||
text-decoration: none;
|
||||
|
|
|
|||
560
styles.css.bak
Normal file
560
styles.css.bak
Normal file
|
|
@ -0,0 +1,560 @@
|
|||
body {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
background-color: #FAF3E0;
|
||||
/* Warm, cozy background color */
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #888;
|
||||
/* Slightly lighter background color */
|
||||
color: #fff;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 1600px;
|
||||
/* Increase max-width to allow more items in a line */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-bottom: 10px;
|
||||
/* Add some space between the logo and navigation */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* Center the logo */
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 0 10px #9b9b9b;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* Center the navigation links on desktop */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
background-color: #4b4b4b;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.topnav a.active {
|
||||
background-color: #91c993;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.topnav a.icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.products {
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.products h2 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* Spread items out evenly */
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
/* Space between items */
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
flex: 1 1 calc(30% - 20px);
|
||||
/* Make each product card flexible */
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
/* Ensure padding and borders are included in the width */
|
||||
}
|
||||
|
||||
.product-card img {
|
||||
width: 80%;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.product-card h3 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.product-card p {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.product-card button {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.product-card button:hover {
|
||||
background-color: #FFD700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
height: 60vh;
|
||||
/* Adjust height as needed */
|
||||
}
|
||||
|
||||
.carousel {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carousel-inner {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-in-out;
|
||||
/* Smooth fade effect */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.carousel-item.active {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
/* Ensure images cover the container without distortion */
|
||||
}
|
||||
|
||||
.carousel-caption {
|
||||
position: absolute;
|
||||
bottom: 20%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
/* Semi-transparent background for better readability */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
max-width: 90%;
|
||||
/* Ensure the caption doesn't overflow */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.carousel-caption h1 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 3em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.carousel-caption p {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.carousel-caption .btn {
|
||||
background-color: #FFD700;
|
||||
color: #333;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.prev,
|
||||
.next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #fff;
|
||||
font-size: 2em;
|
||||
cursor: pointer;
|
||||
padding: 16px;
|
||||
margin-top: -22px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.prev {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.next {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.prev:hover,
|
||||
.next:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.about,
|
||||
.products,
|
||||
.contact {
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about h2,
|
||||
.products h2,
|
||||
.contact h2 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.about p,
|
||||
.products p,
|
||||
.contact p {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 20px;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
flex: 1 1 calc(30% - 20px);
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.product-card img {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.product-card h3 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.product-card p {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.productbtn {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.contact .btn {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.news {
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.news h2,
|
||||
.news h3 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
|
||||
.news h2 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.news h3 {
|
||||
font-size: 1.8em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.news p {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 20px;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.news img {
|
||||
width: 30%;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer .social-media a {
|
||||
color: #FFD700;
|
||||
margin: 0 10px;
|
||||
font-size: 1.5em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer .social-media a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.error-404 {
|
||||
padding: 100px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-404 h1 {
|
||||
font-size: 6em;
|
||||
font-family: 'Playfair Display', serif;
|
||||
color: #FFD700;
|
||||
/* Gold color for emphasis */
|
||||
}
|
||||
|
||||
.error-404 h2 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.error-404 p {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.error-404 .btn {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.error-404 .btn:hover {
|
||||
background-color: #FFD700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
button.btn {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.btn:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
/* Media Queries for Responsiveness */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.product-card {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
|
||||
.products p {
|
||||
font-size: 1em;
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.news p {
|
||||
font-size: 1em;
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.news p {
|
||||
font-size: 0.9em;
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
height: 40vh;
|
||||
/* Adjust height for smaller screens */
|
||||
}
|
||||
|
||||
.carousel-caption h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.carousel-caption p {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.prev,
|
||||
.next {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.about p {
|
||||
font-size: 1em;
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero {
|
||||
height: 30vh;
|
||||
/* Adjust height for smaller screens */
|
||||
}
|
||||
|
||||
.carousel-caption h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.carousel-caption p {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.prev,
|
||||
.next {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.about p {
|
||||
font-size: 0.9em;
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.topnav a:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topnav a.icon {
|
||||
float: right;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.topnav.responsive {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.topnav.responsive .icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
.topnav.responsive a {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue