Interactive Elements

In-text Link

CSS Selector .link-text

Sample Code <a class="link-text" href="#interactive_elements">Link</a>

Rendered Element Link

Navigation Link

CSS Selector .button-nav

Sample Code <a class="button-nav" href="#">Default Button">Link</a>

Rendered Element Default Button

Text Input Field with Label

CSS Selector .form-label .form-input

Sample Code <label for="nameInput" class="form-label">Name:</label> <input type="text" name="name" id="nameInput" class="form-label">

Rendered Element Name:

Image as a Link

CSS Selector .image-wrapper

Sample Code


              <a href="#" class="image-wrapper">
                  <img src="images/burger.png" alt="Burger Image" width="300" height="auto">
              </a>

Rendered Element

Text Elements

Four levels of headings

CSS Selector .cell-content h1,
.cell-content h2,
.cell-content h3,
.cell-content h4

Sample Code


          <h1>Heading1</h1>
          <h2>Heading2</h2>
          <h3>Heading3</h3>
          <h4>Heading4</h4>

Rendered Element

Heading1

Heading2

Heading3

Heading4

Paragraphs

CSS Selector p

Sample Code


                  <p>Welcome to Whimsy Bites Co., where snacks meet smiles! 
                  From playful pink burgers to cheerful bubble teas and happy fries, 
                  we create treats that are as fun to look at as they are to eat. 
                  Crafted with care and packed with joy, our snacks bring a burst of 
                  flavor and happiness to every bite. Experience food that’s whimsical, 
                  delicious, and guaranteed to brighten your day!</p>

Rendered Element

Welcome to Whimsy Bites Co., where snacks meet smiles! From playful pink burgers to cheerful bubble teas and happy fries, we create treats that are as fun to look at as they are to eat. Crafted with care and packed with joy, our snacks bring a burst of flavor and happiness to every bite. Experience food that’s whimsical, delicious, and guaranteed to brighten your day!

Number Lists

CSS Selector .number-list

Sample Code


                  <ol type="1" class="number-list">
                    <li> First option </li>
                    <li> Second option </li>
                  </ol>

Rendered Element

First option
Second option

Combined Elements

Main Navigation

Product/Service Listing

Flashy Burger

Meet the Flashy Burger – a fun and colorful take on the classic burger. Packed with fresh ingredients and a playful design, it’s made to turn heads and satisfy your cravings. A burger that’s as bold in flavor as it is in style!

$15

Maillist sign-up form

Subscribe to Whimsy Bites

Join for new flavors, sales, recipes, & more!

Description of the product

Color Palette

These colors are great for a food website. The soft green (#86A788) gives a fresh and natural look, while the light yellow (#FFFDEC) feels warm and welcoming. The pink shades (#FFE2E2 and #FFCFCF) add a fun and cheerful vibe, making the site feel inviting and friendly.

#FFFDEC

#FFE2E2

#FFD6DD

#FFCFCF

Fonts

The Poppins font was chosen because it is simple, modern, and easy to read. It matches the fun and bright theme of the website while making the text clear and neat. font Image

Manrope offering a clean and modern look that enhances readability. Its versatility helps highlight the playful and vibrant elements of the site while keeping the design fresh and appetizing. font Image