Skip to content

Instantly share code, notes, and snippets.

@stanwmusic

stanwmusic/challenge-may-testimonial-quotes.markdown

Created July 10, 2025 06:13
Show Gist options
  • Save stanwmusic/d50bacc994975c373b11d58ff4d27f66 to your computer and use it in GitHub Desktop.
Save stanwmusic/d50bacc994975c373b11d58ff4d27f66 to your computer and use it in GitHub Desktop.
Download ZIP
Challenge May: Testimonial quotes
Raw
index.html
<main>
<section>
<h1>
<svg viewBox="0 0 800 458" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="curve" d="M0.719774 395C301.5 102 330 80.5 799.2 0.699244L0.720078 6.37596L0.719774 395Z" fill="transparent"/>
<text width="800">
<textPath alignment-baseline="top" xlink:href="#curve">
Barkin' Baxter's Treat Truck
</textPath>
</text>
</svg>
</h1>
<h2 class="subtitle">Poppin' Up Soon at a Dog Park Near You!</h2>
<img class="doggo" alt="doggo" src="https://www.freepnglogos.com/uploads/dog-png/dog-png-for-dogs-allerpet-south-africa-24.png"></img>
<div class="cloud">
I really love those tasty snacks
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</div>
<div class="comments">
<div class="comment">
<h3>"These treats are real tail-waggers"</h3>
<p> My pug Sir Biscuit is obsessed with the Salmon Snackers! He does a little dance when he hears the Barkin' Baxter's truck coming. - Lily R.</p>
<span class="stars">⭐⭐⭐⭐⭐</span>
</div>
<div class="comment">
<h3>"A bona-fido game-changer"</h3>
<p>Baxters are at the top of the food chain! Maximus is a picky eater but he loves these treats. - Albert Z. </p>
<span class="stars">⭐⭐⭐⭐⭐</span>
</div>
<div class="comment">
<h3>"Treat time has never been so dog-gone amazing"</h3>
<p> Our little Mabel gives them two paws up and a whole lot of slobbery kisses. - Jennifer T. </p>
<span class="stars">⭐⭐⭐⭐⭐</span>
</div>
</div>
</section>
<div class="menu">
<h2>What's on the Menu This Weekend?</h2>
<hr />
<div class="menu-item">
<h3>Friday</h3>
<ul>
<li>
<span>🐾 Salmon Snackers</span>
<button><span>Order now</span><svg viewBox="0 0 256 512" width="100" title="angle-right">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
</svg></button>
</li>
<li>🐾 Veggie Patch Poppers<button><span>Order now</span><svg viewBox="0 0 256 512" width="100" title="angle-right">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
</svg></button></li>
<li>🐾 Chicken Pawsta Bites<button><span>Order now</span><svg viewBox="0 0 256 512" width="100" title="angle-right">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
</svg></button></li>
</ul>
</div>
<div class="menu-item">
<h3>Saturday</h3>
<ul>
<li>🐾 Peanut Butter Pupcakes<button><span>Order now</span><svg viewBox="0 0 256 512" width="100" title="angle-right">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
</svg></button></li>
<li>🐾 Turkey Tenderloin Twists<button><span>Order now</span><svg viewBox="0 0 256 512" width="100" title="angle-right">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
</svg></button></li>
<li>🐾 Carrot Cake Pupsicles<button><span>Order now</span><svg viewBox="0 0 256 512" width="100" title="angle-right">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
</svg></button></li>
</ul>
</div>
<div class="menu-item">
<h3>Sunday</h3>
<ul>
<li>🐾 Sweet Potato Surprise<button><span>Order now</span><svg viewBox="0 0 256 512" width="100" title="angle-right">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
</svg></button></li>
<li>🐾 Beefy Bites<button><span>Order now</span><svg viewBox="0 0 256 512" width="100" title="angle-right">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
</svg></button></li>
<li>🐾 Pumpkin Pup Pops<button><span>Order now</span><svg viewBox="0 0 256 512" width="100" title="angle-right">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
</svg></button></li>
</ul>
</div>
</div>
</main>
Raw
style.css
@import url("https://fonts.googleapis.com/css2?family=Delicious+Handrawn&family=Cormorant+Garamond&display=swap");
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
body {
font-family: "Cormorant Garamond", serif;
font-size: 1.3rem;
}
main {
overflow: auto;
height: 100%;
width: 100%;
background-image: url("https://images.unsplash.com/photo-1568640347023-a616a30bc3bd?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODQ1MTcyMTd8&ixlib=rb-4.0.3&q=85"); /*photo by okeykat for Unsplash */
background-size: 120%;
animation: anim-1 5s linear infinite;
}
section {
position: relative;
height: 100vh;
width: 100%;
}
h1 {
font-family: "Delicious Handrawn", cursive;
font-size: 4rem;
}
h1 > svg {
position: absolute;
top: 2rem;
left: 5rem;
font-size: 5rem;
overflow: visible;
width: 30rem;
height: auto;
z-index: 1;
}
h1 > svg text {
stroke: hotpink;
fill: #fff;
writing-mode: tb;
}
.subtitle {
position: absolute;
bottom: 2rem;
right: 20rem;
font-size: 1.5rem;
color: #fff;
z-index: 1;
}
@keyframes anim-1 {
from {
background-position: 0 0;
}
to {
background-position: -10rem -10rem;
}
}
main:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0);
animation: anim-2 5s linear infinite;
}
@keyframes anim-2 {
0% {
opacity: 1;
}
20% {
opacity: 0.5;
}
80% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.doggo {
position: fixed;
width: 20rem;
bottom: 0;
right: 0;
z-index: 1;
}
.cloud {
position: fixed;
right: 2rem;
bottom: 17.5rem;
width: 10rem;
height: 2rem;
border-radius: 51% 49% 58% 42% / 59% 68% 32% 41%;
background: #fff;
z-index: 1;
padding: 2rem 1.5rem;
font-family: "Delicious Handrawn", cursive;
font-size: 1.2rem;
}
.bubble {
position: absolute;
background: #fff;
border-radius: 50%;
}
.cloud > .bubble:nth-child(1) {
width: 1.5rem;
height: 1.5rem;
bottom: -1.75rem;
}
.cloud > .bubble:nth-child(2) {
width: 1.15rem;
height: 1.15rem;
bottom: -2.5rem;
left: 3rem;
}
.cloud > .bubble:nth-child(3) {
width: 0.9rem;
height: 0.9rem;
bottom: -3.75rem;
left: 3.5rem;
}
.comments {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.comment {
position: absolute;
width: 20rem;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
background: #fff;
box-shadow: 0px 0px 15px #555;
}
.comment:hover {
z-index: 2;
}
.comment:nth-child(1) {
top: 3rem;
left: calc(50rem - 15rem);
transform: rotate(5deg);
}
.comment:nth-child(2) {
top: 10rem;
left: calc(35rem - 15rem);
transform: rotate(-9.5deg);
}
.comment:nth-child(3) {
top: 15rem;
left: calc(25rem - 15rem);
transform: rotate(1.5deg);
}
.stars {
margin-left: auto;
}
.menu {
position: relative;
z-index: 1;
background: #fff;
width: 20rem;
padding: 1rem;
box-shadow: 0px 0px 15px #555;
left: 2rem;
margin-bottom: 5rem;
}
.menu:hover {
z-index: 2;
}
li {
list-style-type: none;
display: flex;
flex-direction: column;
}
button {
font-family: inherit;
background: none;
border: none;
font-size: 1.25rem;
font-weight: bold;
margin-left: auto;
border-bottom: 1px solid #333;
cursor: pointer;
display: flex;
}
button > span {
margin: auto;
}
button > svg {
width: 1rem;
margin-left: 0.5rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment