updates and junk

This commit is contained in:
Tristan Smith 2024-05-27 15:48:57 -04:00
parent 4034ef6d4a
commit 7f62af151b
8 changed files with 407 additions and 8 deletions

View file

@ -30,7 +30,7 @@
<main>
<section class="about">
<div class="container">
<div class="container" id="bio">
<h2>About Bethany</h2>
<p>Meet Bethany Rhodes, the creative force behind the charming crochet shop known as WillowMeCreations.
Born and raised in the picturesque state of Indiana, Bethany discovered her passion for crafting at

BIN
img/summer_news.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 498 KiB

BIN
img/summer_news.jpg~ Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 498 KiB

View file

@ -16,7 +16,7 @@
<img src="img/logo-transparent.png" alt="WillowMeCreations logo">
</div>
<nav class="topnav" id="myTopnav">
<a href="index.html" class="active">Home</a>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="news.html">News</a>
<a href="products.html">Products</a>

View file

@ -32,7 +32,7 @@
<section class="news">
<div class="container">
<h2>News</h2>
<h5>Latest News</h5>
<h3>Latest News</h3>
<img src="img/summer_news.jpg" class="news" alt="summer crochet">
<h2>Greetings, fellow yarn enthusiasts!</h2>
<p>We're excited to share some delightful updates from the sunny world of WillowMeCreations.</p>

View file

@ -46,7 +46,7 @@
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="img/productpage3.jpg" alt="Sweater 3">
<img src="img/productpage3.jpg" alt="Not a sweater, obviously">
<h3>Sweater 3</h3>
<p>Price: $105</p>
<button>Add to Cart</button>

400
style-shit.css Normal file
View file

@ -0,0 +1,400 @@
/* General Styles */
body {
font-family: 'Montserrat', sans-serif;
color: #333;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #FAF3E0;
}
/* Container Styles */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
text-align: center;
}
#bio p {
text-align: left;
}
/* Header Styles */
.header {
display: flex;
flex-direction: column;
align-items: center;
background-color: #888;
color: #fff;
padding: 20px 0;
}
.logo {
margin-bottom: 10px;
display: flex;
justify-content: center;
}
.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;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.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;
}
/* Hero Section */
.hero {
position: relative;
overflow: hidden;
text-align: center;
height: 60vh;
}
.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;
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;
}
.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);
padding: 20px;
border-radius: 10px;
max-width: 90%;
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;
}
/* Section Styles */
.section {
padding: 60px 0;
text-align: center;
}
.section h2 {
font-family: 'Playfair Display', serif;
font-size: 2.5em;
margin-bottom: 20px;
}
.section p {
font-size: 1.1em;
line-height: 1.8;
margin-bottom: 20px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* Product Styles */
.product-grid {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.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;
}
.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;
}
.button {
display: inline-block;
background-color: #333;
color: #fff;
padding: 10px 20px;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
border: none;
cursor: pointer;
margin: 10px 0;
}
.button:hover {
background-color: #FFD700;
color: #333;
}
.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;
}
/* Footer Styles */
.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 Page Styles */
.error-404 {
padding: 100px 0;
text-align: center;
}
.error-404 h1 {
font-size: 6em;
font-family: 'Playfair Display', serif;
color: #FFD700;
}
.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;
}
/* Responsive Styles */
@media (max-width: 768px) {
.product-card {
width: calc(50% - 20px);
}
.section p {
font-size: 1em;
max-width: 90%;
}
.hero {
height: 40vh;
}
.carousel-caption h1 {
font-size: 2em;
}
.carousel-caption p {
font-size: 1em;
}
.prev,
.next {
font-size: 1.5em;
}
}
@media (max-width: 480px) {
.product-card {
width: 100%;
}
.hero {
height: 30vh;
}
.carousel-caption h1 {
font-size: 1.5em;
}
.carousel-caption p {
font-size: 0.8em;
}
.prev,
.next {
font-size: 1.2em;
}
.section 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;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
width: 100%;
color: #f2f2f2;
}
}

View file

@ -346,7 +346,7 @@ body {
}
.news img {
width: 100%;
width: 30%;
border-radius: 10px;
margin-bottom: 20px;
}
@ -502,6 +502,7 @@ body {
position: absolute;
right: 0;
top: 0;
background-color: #808080;
}
.topnav.responsive a {
@ -519,6 +520,4 @@ body {
.product-card {
width: 100%;
}
}
/* I fucking hate css */
}