Skip to content

Commit

Permalink
Small changes
Browse files Browse the repository at this point in the history 
- Favicon fixed, now using ico format and no stretching.
- Fixed syntax: Anchor elements are used when directing user to another page.
-  Cleaned up CSS.
  • Loading branch information
@philocalyst
philocalyst committed Sep 1, 2023
1 parent 09c3cb5 commit 7c43f8b
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 160 deletions.
Binary file removed Images/Favicon.png
View file
Binary file not shown.
Binary file added Images/Leopolds-Favicon.ico
View file
Binary file not shown.
38 changes: 18 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | Leopolds Ice Cream</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="Images/Favicon.png" type="image/png">
<link rel="icon" href="Images/Leopolds-Favicon.ico" type="image/png">
<link rel="preload" href="Fonts/Ageo-Bold.woff2" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="Fonts/Cooper-Medium.woff2" as="font" type="font/ttf" crossorigin>
<link rel="preload" as="image" href="Images/Leopolds-Logo.webp">
Expand All @@ -20,20 +20,20 @@
</div>
<section aria-label="Navigation Bar">
<nav id="initialNavigation">
<button aria-description="Link to Ice Cream Menu" class="button">Menu</button>
<a aria-description="Link to Ice Cream Menu" class="button">Menu</a>
<button aria-description="Opens hidden altnerate menu" class="button" id="expandBtn">Explore</button>
<button aria-description="Link to shipping options for merchandise and ice cream" class="button">Ship</button>
<a aria-description="Link to shipping options for merchandise and ice cream" class="button">Ship</a>
</nav>
<nav id="hiddenNavigation" class="hidden">
<img id="back" src="Images/Back-Arrow.svg" title="Back arrow"
loading="lazy" decoding="async">
<div class="navWrapper">
<button aria-description="Links to description of Stratton Leopold, founder of Leopolds">Our Founder</button>
<button aria-description="Link to Leopold's blog" >Blog</button>
<button aria-description="Link to Merchandise shop" >Shop</button>
<button aria-description="Link to Leopold's locations addresses">Locations</button>
<button aria-description="Link to catering and events">Ice Cream Socials</button>
<button aria-description="Link to about page">About</button>
<a aria-description="Links to description of Stratton Leopold, founder of Leopolds">Our Founder</a>
<a aria-description="Link to Leopold's blog" >Blog</a>
<a aria-description="Link to Merchandise shop" >Shop</a>
<a aria-description="Link to Leopold's locations addresses">Locations</a>
<a aria-description="Link to catering and events">Ice Cream Socials</a>
<a aria-description="Link to about page">About</a>
</div>
</nav>
</section>
Expand All @@ -50,21 +50,19 @@ <h4 class="other">Airport Shop: <span>Daily Noon - 8PM</span></h4>
<section aria-label="Order Ahead">
<h2>Want to skip the line?</h2>
<h3>(Limited Menu Only)</h3>
<button>Order Ahead!</button>
<a>Order Ahead!</a>
</section>
<section aria-label="About Leopolds">
<h2>About Us</h2>
<p>
For over a century, we have been serving up
<p>For over a century, we have been serving up
"Good Things to Eat, Good Things to Drink" in
beautiful, historic Savannah, Georgia. From our
award-winning, homemade super-premium ice
cream, unchanged since 1919, to our fresh
squeezed fruit drinks, coffees and freshly baked
treats, you're sure to find something memorable at
Leopold's.
</p>
<button aria-description="Link to about page with more information">Learn more</button>
Leopold's.</p>
<a aria-description="Link to about page with more information">Learn more</a>
</section>
<section aria-label="Famous People at Leopolds">
<h2>Famously Good!</h2>
Expand Down Expand Up @@ -122,15 +120,15 @@ <h2>Sprinkle some fun into your next event!</h2>
<img src="Images/Cart.webp" title="Leopold's Catering Cart" alt="Friendly leopolds worker serving ice cream from catering cart"
loading="lazy" decoding="async" width="600" height="594">
<strong>From corporate functions to birthday parties, we do it all. Want to make it more unique? Help us make a flavor just for you!</strong>
<button>Get Started</button>
<a>Get Started</a>
</div>
</section>
<section aria-label="Shipping">
<img src="Images/Shipping-Image.webp" title="Leopold's Shipping Van" alt="Leopolds shipping van pictured on a highway, smeared lights surround it."
loading="lazy" decoding="async" width="748" height="477">
<div class="shippingTextWrapper">
<h2>Shipping Nationwide</h2>
<button>More Details</button>
<a>More Details</a>
</div>
</section>
<section aria-label="Girl Scout Catering Information">
Expand Down Expand Up @@ -168,7 +166,7 @@ <h2>Join our Family</h2>
<strong>© 2023 Leopold's Ice Cream. All Rights Reserved.</strong>
</footer>
<script src="track.js" defer></script>
<script defer>
<script>
var buttons = Array.from(document.getElementsByClassName('button'));
document.getElementById("expandBtn").addEventListener("click", function() {
buttons.forEach(button => {
Expand All @@ -182,7 +180,7 @@ <h2>Join our Family</h2>
setTimeout(function() {
document.getElementById("hiddenNavigation").classList.add("show");
document.getElementById("back").classList.add("show");
let listItems = document.querySelectorAll('.navWrapper button');
let listItems = document.querySelectorAll('.navWrapper a');
listItems.forEach((item, index) => {
item.style.transitionDelay = `${index * 0.1}s`;
});
Expand All @@ -193,7 +191,7 @@ <h2>Join our Family</h2>
document.getElementById("back").classList.remove("show");
document.getElementById("hiddenNavigation").style.minHeight = '0px';
document.getElementById("hiddenNavigation").classList.remove("show");
let listItems = document.querySelectorAll('.navWrapper button');
let listItems = document.querySelectorAll('.navWrapper a');
let length = listItems.length;
for (let index = length - 1; index >= 0; index--) {
let item = listItems[index];
Expand Down
150 changes: 10 additions & 140 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ img {
margin: 0;
}

[aria-label="Order Ahead"] > button {
[aria-label="Order Ahead"] > a {
margin: 15px;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}
Expand All @@ -82,7 +82,6 @@ footer > strong {
display: inherit;
}

/* Header */
header {
border-radius: 10px 10px 0 0;
background-color: white;
Expand All @@ -99,7 +98,7 @@ header img {
z-index: 2;
}

header button {
header a, header button {
font-family: 'Ageo';
font-weight: 400;
border-radius: 8px;
Expand All @@ -111,6 +110,7 @@ header button {
background: none;
font-size: 7.9vmin;
outline: none;
text-align: center;
}

#back {
Expand Down Expand Up @@ -156,7 +156,7 @@ header .button.hide {
padding: 0;
}

#hiddenNavigation button {
#hiddenNavigation a {
display: list-item;
list-style: none;
margin: 0px 0 5px 0;
Expand All @@ -175,7 +175,7 @@ header .button.hide {
transition: max-height .65s ease-in-out;
}

#hiddenNavigation.show button {
#hiddenNavigation.show a {
transform: translate3d(0, 0, 0);
opacity: 1;
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
Expand Down Expand Up @@ -225,71 +225,12 @@ header .button.hide {
justify-content: center;
}

#initialNavigation button:not(:last-child)::after {
#initialNavigation .button:not(:last-child)::after {
content: "•";
margin-left: 4vw;
color: rgb(240, 157, 180);
}

#order {
background: linear-gradient(
45deg,
rgb(235, 235, 141) 5%,
rgb(235, 235, 141) 10%,
white 10%,
white 15%,
rgb(235, 235, 141) 15%,
rgb(235, 235, 141) 20%,
white 20%,
white 25%,
rgb(235, 235, 141) 25%,
rgb(235, 235, 141) 30%,
white 30%,
white 35%,
rgb(235, 235, 141) 35%,
rgb(235, 235, 141) 40%,
white 40%,
white 45%,
rgb(235, 235, 141) 45%,
rgb(235, 235, 141) 50%,
white 50%,
white 55%,
rgb(235, 235, 141) 55%,
rgb(235, 235, 141) 60%,
white 60%,
white 65%,
rgb(235, 235, 141) 65%,
rgb(235, 235, 141) 70%,
white 70%,
white 75%,
rgb(235, 235, 141) 75%,
rgb(235, 235, 141) 80%,
white 80%,
white 85%,
rgb(235, 235, 141) 85%,
rgb(235, 235, 141) 90%,
white 90%,
white 95%,
rgb(235, 235, 141) 95%
);
background-size: 200% 100%;
animation: barber-pole-animation 12s linear infinite;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

@keyframes barber-pole-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 500% 0;
}
}

/* About Leopolds Section */

[aria-label="About Leopolds"] h2, [aria-label="Social Media"] h2 {
font-family: 'Anko-Bold-Italic';
font-weight: 300;
Expand Down Expand Up @@ -348,7 +289,7 @@ header .button.hide {
margin-left: 15px;
}

[aria-label="About Leopolds"] button {
[aria-label="About Leopolds"] a {
margin-bottom: 12px;
}

Expand Down Expand Up @@ -395,62 +336,6 @@ span {
font-size: 23px;
}

/* Slider */
.slider {
margin: auto;
display: flex;
width: fit-content;
overflow: hidden;
gap: 50vw;
position: relative;
left: 1%;
}

.sliderContainer {
display: flex;
transition: transform 0.3s ease;
padding-bottom: 3vh;
position: relative;
}

[aria-label="What's Popular"] {
height: auto;
width: 99.5%;
overflow: hidden;
background-color: white;
border: 1px solid #E28C4A;
}

[aria-label="What's Popular"] h2 {
font-size: 11vmin;
margin: 25px 0 15px 0;
color: #9D000D;
}

.item {
flex: 0 0 300px;
display: flex;
flex-direction: column;
align-items: center;
}

.item img {
width: 97%;
border-radius: 15px;
}

.item > button {
min-width: 45%;
margin-right: 10px;
margin-bottom: 2px;
}

.item h3 {
min-width: 340px;
font-size: 29px;
margin: 10px 0 10px;
}

[aria-label="Catering Information"] {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -478,7 +363,7 @@ span {
outline: 1px solid #b9af93;
}

[aria-label="Catering Information"] button {
[aria-label="Catering Information"] a {
margin-bottom: 15px;
}

Expand Down Expand Up @@ -557,7 +442,7 @@ span {
border-style: solid;
}

button, #submit {
a, #submit {
margin-top: 4px;
width: fit-content;
font-family: 'Hando Bold';
Expand All @@ -568,7 +453,7 @@ button, #submit {
border-radius: 6px;
border: none;
text-decoration: none;
outline: 2px solid #53061c;
border: 2px solid #53061c;
}

/* Girl Scouts */
Expand Down Expand Up @@ -651,7 +536,6 @@ button, #submit {
border-radius: 10px;
}

/* Awards */
.awards {
display: flex;
justify-content: center;
Expand All @@ -671,7 +555,6 @@ button, #submit {
border-radius: 10px;
}

/* Wrapper */
[aria-label="Famous People at Leopolds"] {
height: 103vmin;
width: 99.5%;
Expand Down Expand Up @@ -722,17 +605,4 @@ button, #submit {
height: 65vmin;
object-fit: cover;
object-position: 100% center;
}

/* Media Queries */
@media (min-width: 385px) {
.slider {
left: 1.5%;
}
}

@media (min-width: 401px) {
.slider {
left: 2.55%;
}
}

0 comments on commit 7c43f8b

Please sign in to comment.