HTML

create a mobile-first, responsive web page about a product. Can you help me fix my code follow the below request?

My Shoes Store

Carly Wish White Interest

$90.00 Size 7

Simple yet stylish, the Carly is super easy to wear thanks to its ultra-grippy TPR outsole, innovative Cushion Soft technology and uniquely barefoot feel..

Grace Piper Taupe Snake

$100.00 Size 8

A must-have for this season are these feminine pumps that have been refreshed in a taupe snake. The sleek rubber outsole offers great traction and the low 1cm heel provides subtle elevation. Providing a touch of luxury, these shoes feature super soft leather linings and sock, while our dual density Cushion Plus technology offers targeted cushioning..

Nova Lumis Champagne

$85.00 Size 8

A new athleisure profile, the ultra-lightweight Nova Lumis in champagne uses innovative technology, including a removable OrthoLite footbed and flexible EVA sole, for effortless all-day movement.

Desert Boot 2 Light Pink

$150.00 Size 8

This season ventures back to where it all began. Back to our authentic colours, styles and designs, the icons that made us who we are today. The Desert Boot 2 adopts innovative new technology that perfectly complements its iconic appearance. Rubber outsoles with recycled content give increased grip and durability while light-pink suede wraps feet in lightweight comfort. OrthoLite technology cushions feet and a traditional stitch down construction offers improved flexibility.

Kendra Sienna Navy

$110.00 Size 6

Reinvented for the season, our classic court Kendra Sienna sees a stylish almond toe shape teamed with a 9cm block heel for a statement look, while the sculpted flexible platform remains a chic feature. Comfort is guaranteed with every step thanks to a premium leather sock and our unique Cushion Plus technology, while the rubber pod in the forepart of the sole offers grip and flexibility as you walk. A sophisticated day to night style.

Wallacraft Lo Off White Camo

$190.00 Size 6

In striking blue camo, this new addition to our iconic Wallabee line is a contemporary take on an absolute classic.

h1 { color: silver; font-size: 100px; font-family: Arial; }

.description { padding: 5px; font-family: Garamond; }

.singleshoeimage { height: 175px; width: 175px; display: block; margin-left: auto; margin-right: auto; border-radius: 4px; padding: 5px; }

.center { display: block; margin-left: auto; margin-right: auto; width: 50%; }

#title { display: block; text-align: center; padding-top: 0px; padding-bottom: 10px; margin: 0px }

#header { display: block; margin-top: 0px; background-color: orange; padding-top: 0px; margin-bottom: 10px; padding-bottom: 10px; }

1.Do not use flexbox or bootstrap on this assignment. Must use floats, percentages, and media queries to create rows and columns for this page using internal css and make it responsive to different screen sizes.

2. A product that is being sold. Display the name, image, price, number of reviews (ok if its an image), and description.

3. colored promo code box.

4. related products section where at least four (4) other product names and images are displayed.

5.Your site needs to be implemented using mobile-first approach.Default CSS should be for mobile (0-767px). Then use media queries to handle tablet sizes (768px 992px) and desktop sizes (992px and above).

Mobile Devices (0-767px):

1. Single-column layout,
2. Name of product is above the product image.
3. Below the product image, display a colored promo code box with some info in it.
4. Promo code box width is smaller than the main products image.
5. Promo code box is horizontally centered.
6. One (1) related product item is listed per row.
   1. Create a
      per related item. Put image inside this div. Add border around the

      and not the image.
   2. Related products all have a width that is smaller than the main products image.
   3. Related products are all horizontally centered.
   4. All images scale up as browser size increases.

   Tablet Devices (768px 991px):

   1. Two-column layout the product image and promo code box on the left and the product details on the right.
      1. Product name is on top of the product details on the right. Hint: show this only for tablet devices and up.
   2. Two (2) related products listed per row.
   3. All images scale up as browser size increases.
   4. The bar on top with store name is as wide as the browse.Desktop Devices (992px above):
   5. Two-column layout,
   6. Four (4) related products listed per row
   7. The box that contains all the product information must not grow wider than 1000px.
   8. The bar on top with store name must always be as wide as the browser.
   9. Hover effect:
   10. When user hovers over any related product, show an overlay (div) that also displays the products name.
   11. Sample has the products name vertically centered but you do not need to have product name vertically centered.
   12. The overlay must span across the entire product (see sample).
   13. The overlay must have a background color that is slightly transparent.
   Q Search WZ Activity A SAMPLE.pdf Close Chat Tshirt Teams echo dot Echo Dot Pie MI Assignments AR The power Call . Files ... Apus Help " 5:27 PM ENG 2/20/2021