Interactive online courses HTML Academy
2026-03-09 12:56 Diff
https://htmlacademy.org/courses/php-basics/php-numbers-strings/embed-loop

<?php require('products_db.php'); $products = get_products(); $limit = 6; $page = intval($_GET['page']) ?: 1; $offset = ($page - 1) * $limit; $products_on_page = array_slice($products, $offset, $limit, true); require('components/header.php'); require('components/products_list.php'); require('components/footer.php');

<footer class="site-footer"> <div class="container"> <p class="copyright">© Muffin, 2019</p> <ul class="navigation-list"> <li><a href="catalog.php">Catalog</a></li> <li><a href="delivery.php">Delivery</a></li> <li><a href="cart.php">Cart</a></li> </ul> <ul class="social-list"> <li> <a class="social-link-twitter" href="https://twitter.com"> <span class="visually-hidden">Twitter</span> </a> </li> <li> <a class="social-link-instagram" href="https://instagram.com"> <span class="visually-hidden">Instagram</span> </a> </li> <li> <a class="social-link-facebook" href="https://facebook.com"> <span class="visually-hidden">Facebook</span> </a> </li> </ul> </div> </footer> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Online store for home furnishings</title> <link href="style.css" rel="stylesheet"> </head> <body> <header class="site-header"> <nav class="site-navigation"> <a class="logo-link" href="index.php"> <img src="img/logo-full.svg" width="62" height="17" alt="Gloevk store logo"> </a> <ul class="navigation-list"> <li><a href="catalog.php">Catalog</a></li> <li><a href="delivery.php">Delivery</a></li> <li><a href="cart.php">Cart</a></li> </ul> </nav> </header>

<section class="catalog"> <div class="container"> <h1 class="catalog-title">Product catalog</h1> <ol class="pagination"> <!-- Write the start of the loop here --> <li> <a></a> </li> <!-- Write the end of the loop here --> </ol> <ul class="products-list"> <?php foreach($products_on_page as $i => $item): ?> <li> <a class="product-card" data-index="<?= $i - 1 ?>" href="product.php?product_id=<?= $i ?>"> <h3><?= $item['title'] ?></h3> <img src="<?= $item['img_url'] ?>" width="156" height="120" alt="<?= $item['title'] ?>"> <div class="product-options"> <span class="price"><?= $item['price'] ?></span> <ul class="colors-list"> <?php foreach ($item['colors'] as $color): ?> <li class="color-<?= $color ?>"></li> <?php endforeach;?> </ul> </div> </a> </li> <?php endforeach; ?> </ul> </div> </section>

<?php function get_products() { return [ '1' => [ 'title' => 'Asusmer hanging bed', 'img_url' => 'img/item-asusmer.jpg', 'price' => 10000, 'discount' => 1000, 'is_new' => true, 'is_last' => false, 'type' => 'furniture', 'colors' => ['blue'], 'features' => ['Pleases cats', 'Inspires envy', 'Hangs firmly', 'Soft', 'Stylish', 'Yours', 'Doesn’t swing like a baby’s cradle', 'Waits for you at home'] ], '2' => [ 'title' => 'Badeta armchair', 'img_url' => 'img/item-badeta.jpg', 'price' => 3500, 'discount' => 0, 'is_new' => false, 'is_last' => false, 'type' => 'furniture', 'colors' => ['blue', 'black'], 'features' => ['Shakes the apartment', 'Cozy', 'Hangs firmly', 'It’s just as if grandma knitted it'] ], '3' => [ 'title' => 'Blempere stickers', 'img_url' => 'img/item-blempere.jpg', 'price' => 500, 'discount' => 0, 'is_new' => false, 'is_last' => true, 'type' => 'other', 'colors' => ['blue', 'black', 'red'], 'features' => ['Adhere permanently', 'Bright', 'Funny', 'Stylish', 'Do not launder'] ], '4' => [ 'title' => 'Bletub chandelier', 'img_url' => 'img/item-bletub.jpg', 'price' => 4000, 'discount' => 0, 'is_new' => true, 'is_last' => true, 'type' => 'lighting', 'colors' => ['red'], 'features' => ['The cat cannot reach it', 'It hangs firmly in place', 'Shines brightly'] ], '5' => [ 'title' => 'Breirbury organizer', 'img_url' => 'img/item-breirberi.jpg', 'price' => 5000, 'discount' => 3000, 'is_new' => true, 'is_last' => true, 'type' => 'other', 'colors' => ['yellow'], 'features' => ['So that your junk is always an arm’s reach away', 'Convenient', 'You can cook and watch a movie at the same time'] ], '6' => [ 'title' => 'Mseyulida lamp', 'img_url' => 'img/item-mseyulida.jpg', 'price' => 4000, 'discount' => 500, 'is_new' => true, 'is_last' => false, 'type' => 'lighting', 'colors' => ['orange', 'green', 'yellow', 'blue', 'black'], 'features' => ['Suitable for any interior', 'Sturdy'] ], '7' => [ 'title' => 'Rmaeribi sofa', 'img_url' => 'img/item-rmaeribi.jpg', 'price' => 15000, 'discount' => 4500, 'is_new' => true, 'is_last' => true, 'type' => 'furniture', 'colors' => ['green', 'black', 'red', 'blue'], 'features' => ['Soft', 'Cozy', 'Cats and children love it', 'Hides stains', 'Easy to clean'] ], '8' => [ 'title' => 'Nnulm desk', 'img_url' => 'img/item-nnulm.jpg', 'price' => 5000, 'discount' => 0, 'is_new' => true, 'is_last' => false, 'type' => 'furniture', 'colors' => ['green'], 'features' => ['Eco-friendly', 'Lots of drawers', 'It has room for a mug and a pile of papers'] ], '9' => [ 'title' => 'Tre furniture set', 'img_url' => 'img/item-tre.jpg', 'price' => 20000, 'discount' => 3000, 'is_new' => true, 'is_last' => true, 'type' => 'furniture', 'colors' => ['yellow', 'black'], 'features' => ['Relaxes', 'Doesn’t creak', 'Looks cool'] ], '10' => [ 'title' => 'Granny style chandelier', 'img_url' => 'img/item-default-old-lamp.jpg', 'price' => 7000, 'discount' => 2000, 'is_new' => false, 'is_last' => true, 'type' => 'lighting', 'colors' => ['blue', 'black'], 'features' => ['Nostalgic', 'Fits into any interior', 'Your neighbors will envy it', 'Stylish'] ], '11' => [ 'title' => 'Do lamp', 'img_url' => 'img/item-do.jpg', 'price' => 3500, 'discount' => 500, 'is_new' => true, 'is_last' => false, 'type' => 'lighting', 'colors' => ['black'], 'features' => ['Looks beautiful', 'Shines'] ], '12' => [ 'title' => 'Tueta panel', 'img_url' => 'img/item-tueta.jpg', 'price' => 5000, 'discount' => 20, 'is_new' => true, 'is_last' => true, 'type' => 'textile', 'colors' => ['red'], 'features' => ['Will surprise your guests', 'It makes you want to touch it', 'Eye-catching'] ], '13' => [ 'title' => 'Nmiao pillow', 'img_url' => 'img/item-nmyao.jpg', 'price' => 1500, 'discount' => 0, 'is_new' => false, 'is_last' => false, 'type' => 'textile', 'colors' => ['orange'], 'features' => ['Cozy for the cat', 'Comfortable for you', 'Fun for your kid'] ], '14' => [ 'title' => 'Kel lamp', 'img_url' => 'img/item-kel.jpg', 'price' => 3000, 'discount' => 20, 'is_new' => true, 'is_last' => false, 'type' => 'lighting', 'colors' => ['orange', 'blue'], 'features' => ['Helps you read at night', 'Small', 'Exudes a cozy glow', 'Doesn’t bother others'] ], '15' => [ 'title' => 'Omase pillow', 'img_url' => 'img/item-omase.jpg', 'price' => 2000, 'discount' => 100, 'is_new' => true, 'is_last' => true, 'type' => 'textile', 'colors' => ['grey', 'black'], 'features' => ['Brightly colored', 'Square', 'Soft'] ], '16' => [ 'title' => 'Ormu basket', 'img_url' => 'img/item-ormu.jpg', 'price' => 2200, 'discount' => 20, 'is_new' => true, 'is_last' => false, 'type' => 'other', 'colors' => ['blue'], 'features' => ['Everything fits', 'You can plant a flower in it', 'Hides the cat'] ], '17' => [ 'title' => 'Pinas paperclips', 'img_url' => 'img/item-pinas.jpg', 'price' => 100, 'discount' => 0, 'is_new' => true, 'is_last' => true, 'type' => 'other', 'colors' => ['blue', 'black'], 'features' => ['Do not rust', 'Strong', 'You get a bunch of them', 'There is enough to last a long time'] ], '18' => [ 'title' => 'Preum compact cassette', 'img_url' => 'img/item-preum.jpg', 'price' => 200, 'discount' => 20, 'is_new' => true, 'is_last' => false, 'type' => 'other', 'colors' => ['blue', 'black'], 'features' => ['Soothing', 'Surprise your teen', 'You can rewind the tape with a pencil'] ], '19' => [ 'title' => 'Rmob souvenir', 'img_url' => 'img/item-rmob.jpg', 'price' => 1500, 'discount' => 20, 'is_new' => false, 'is_last' => false, 'type' => 'other', 'colors' => ['green', 'orange', 'yellow'], 'features' => ['For the Marvel fan', 'You can plant a flower', 'Glorious', 'Makes you smile'] ], '20' => [ 'title' => 'Tkuoko chandelier', 'img_url' => 'img/item-tkuoko.jpg', 'price' => 2100, 'discount' => 1000, 'is_new' => false, 'is_last' => false, 'type' => 'lighting', 'colors' => ['green', 'orange'], 'features' => ['Glitters', 'Shines', 'Looks expensive', 'Can be hung'] ], '21' => [ 'title' => 'Briatuo armchairs', 'img_url' => 'img/item-briatuo.jpg', 'price' => 7000, 'discount' => 5500, 'is_new' => false, 'is_last' => true, 'type' => 'furniture', 'colors' => ['blue'], 'features' => ['Vivid', 'Deep', 'Beautiful', 'Relaxing', 'Comfortable for your back'] ] ]; } function get_filters() { return [ 0 => [ 'url' => 'all', 'name' => 'All products', ], 1 => [ 'url' => 'lighting', 'name' => 'Lighting', ], 2 => [ 'url' => 'furniture', 'name' => 'Furniture', ], 3 => [ 'url' => 'textile', 'name' => 'Textile', ], 4 => [ 'url' => 'other', 'name' => 'Other', ] ]; } function get_product_attribute($id, $attr) { $products = get_products(); $result = $products[$id][$attr] ?? null; return $result; } function get_product_price($id) { return get_product_attribute($id, 'price'); } function get_product_title($id) { return get_product_attribute($id, 'title'); } function get_img_url($id) { return get_product_attribute($id, 'img_url'); } function get_product_discount($id) { return get_product_attribute($id, 'discount'); } function get_product_is_new($id) { return get_product_attribute($id, 'is_new'); } function get_product_is_last($id) { return get_product_attribute($id, 'is_last'); } function get_product_features($id) { return get_product_attribute($id, 'features'); }

.visually-hidden:not(:focus):not(:active), input[type="checkbox"].visually-hidden, input[type="radio"].visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden; } body { min-width: 550px; padding: 0; margin: 0; font-family: "Arial", "Helvetica", sans-serif; font-size: 13px; line-height: 18px; } a { text-decoration: none; color: inherit; } .container { width: 510px; padding: 0 20px; margin: 0 auto; } .site-navigation { display: flex; width: 510px; padding: 0 20px; margin: 0 auto; justify-content: space-between; } .site-header { position: relative; z-index: 2; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .logo-link:hover, .logo-link:focus { opacity: 0.5; } .logo-link:active { opacity: 0.3; } .logo-link img { margin: 10px 0; } .navigation-list { display: flex; margin: 0 -15px 0 0; padding: 0; list-style: none; flex-wrap: wrap; justify-content: flex-end; } .navigation-list a:hover, .navigation-list a:focus { opacity: 0.5; } .navigation-list a:active { color: #ff8a00; } .navigation-list a { display: block; padding: 12px 15px 11px; color: #845927; } .intro .container { z-index: -1; min-height: 160px; margin-bottom: 0; padding: 20px 0 0; box-sizing: border-box; background-image: url("img/index-background.jpg"); background-repeat: no-repeat; background-position: top right; } .intro-title { width: 240px; padding: 0; margin: 0; font-family: "Georgia", "Times", serif; font-size: 28px; line-height: 36px; font-weight: 400; } .brands-title b, .intro-title b, .features-title b, .delivery-text b { font-weight: 400; color: #ff8a00; } .intro p { width: 210px; margin: 8px 0 10px; padding: 0; line-height: 20px; } .quote { display: block; position: relative; padding: 0 0 0 33px; margin: 20px 0 20px; font-family: "Georgia", "Times", serif; font-style: italic; } .quote p { padding: 0; margin: 0; font-size: 16px; line-height: 24px; quotes: none; } .quote::before { position: absolute; content: "«"; top: 0; left: 0; font-size: 36px; color: #ff8a00; } .author { display: block; padding: 0; margin: 4px 0; } .popular-products { margin: 0; background-color: #fff3e5; } .delivery, .custom, .contacts, .catalog, .item, .order { padding-top: 15px; padding-bottom: 10px; } .delivery-title, .custom-title, .contacts-title, .catalog-title, .order-title { padding: 0; margin: 5px 0; font-family: "Georgia", "Times", serif; font-size: 28px; line-height: 36px; font-weight: 400; } .filters { display: flex; flex-wrap: wrap; margin: 10px -10px -10px 0; padding: 0; list-style: none; } .filter { display: flex; padding: 8px 16px; margin: 0 10px 10px 0; color: #ff8a00; border: 1px solid #ff8a00; border-radius: 4px; cursor: pointer; } .filter:focus, .filter:hover { color: #ffffff; background-color: #ff8a00; } .filter:active { box-shadow: inset 0 2px 10px #c86c00; } .filter.filter-current { color: #ffffff; background-color: #ff8a00; box-shadow: inset 0 2px 10px #c86c00; cursor: default; } .custom-columns { display: flex; flex-grow: 0; } .custom-columns img { display: flex; flex-shrink: 0; align-items: center; margin: 20px 20px 20px 0; min-height: 200px; } .custom-columns div { margin: 5px 0 20px; } .products-list { display: flex; padding: 20px 0 0; margin: 0 0 0 -20px; flex-wrap: wrap; flex-shrink: 0; list-style: none; } .products-list li { display: flex; } .product-card { position: relative; display: flex; width: 132px; margin-bottom: 20px; margin-left: 20px; padding: 124px 12px 12px; flex-direction: column; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .product-card-new { position: relative; } .product-card-new::after { position: absolute; content: "new"; width: 34px; height: 15px; top: 8px; right: -2px; font-weight: 700; line-height: 14px; color: #ffffff; text-align: center; background-color: #ff8a00; border-radius: 4px 0 0 4px; } .product-card:hover, .product-card:focus { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .product-card:active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .product-card img { position: absolute; top: 0; left: 0; order: -1; } .product-card h3 { margin: 0 0 2px 0; padding: 0; font-family: "Georgia", "Times", serif; font-size: 15px; line-height: 18px; font-weight: 400; } .product-card p { margin: 0 0 8px 0; padding: 0; font-family: "Georgia", "Times", serif; font-style: italic; font-size: 13px; line-height: 16px; } .product-options { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: auto; } .price { margin-right: 10px; flex-shrink: 1; font-weight: 700; font-size: 15px; color: #ff8a00; } .price::after { content: "₽"; } .colors-list { display: flex; margin: 4px 0 0 -4px; padding: 0; list-style: none; } .colors-list li { box-sizing: border-box; width: 10px; height: 10px; margin-left: 4px; border-radius: 50%; } .color-orange { background-color: orange; } .color-yellow { background-color: yellow; } .color-green { background-color: green; } .color-red { background-color: red; } .color-blue { background-color: blue; } .color-black { background-color: black; } .color-white { background-color: white; border: 1px solid #c0c0c0; } .price del { margin-right: 2px; font-weight: 400; font-size: 13px; color: #000000; text-decoration: line-through; } .map-link { display: block; margin-top: -20px; margin-bottom: 30px; color: #845927; } .map-link:hover, .map-link:focus { opacity: 0.5; } .map-link:active { color: #ff8a00; } .contacts img { display: flex; flex-shrink: 0; align-items: center; margin: 20px 0 30px; min-height: 200px; } .item-title { display: inline-block; vertical-align: baseline; padding-right: 50px; margin: 5px 0 0; font-family: "Georgia", "Times", serif; font-size: 28px; line-height: 36px; font-weight: 400; } .item-new { position: relative; } .item-new::after { position: absolute; content: "new"; width: 38px; height: 16px; top: 13px; right: 0; font-family: "Arial", "Helvetica", sans-serif; font-size: 15px; font-weight: 700; line-height: 14px; color: #ffffff; text-align: center; background-color: #ff8a00; border-radius: 4px; } .item-container { display: flex; } .item-img { display: flex; flex-shrink: 0; margin: 20px 0; } .item-hot .item-img { position: relative; padding-top: 36px; } .item-hot .item-img::before { position: absolute; content: ""; width: 290px; height: 36px; top: 0; left: 0; background-color: #fff3e5; background-image: url("img/icon-hot.svg"); background-repeat: no-repeat; background-size: 11px 14px; background-position: 62px 10px; } .item-hot .item-img::after { position: absolute; content: "The product will soon sell out!"; top: 10px; left: 80px; } .item-info { margin: 8px 0 10px 20px; flex-grow: 1; } .title-advantages { margin: 10px 0 8px; font-family: "Georgia", "Times", serif; font-size: 15px; line-height: 22px; font-weight: 400; } .item-advantages { margin: 0; padding-left: 14px; padding-bottom: 12px; border-bottom: 1px solid #e2e2e2; font-family: "Georgia", "Times", serif; font-style: italic; list-style: none; } .item-advantages li { position: relative; margin-bottom: 6px; } .item-advantages li::before { position: absolute; content: ""; width: 6px; height: 6px; top: 6px; left: -14px; background-color: #000000; border-radius: 50%; } .item-buy { display: flex; flex-wrap: wrap; margin: 16px 0 0; } .item-buy .price { display: flex; flex-wrap: wrap; align-items: baseline; position: relative; max-width: 510px; margin-top: -2px; margin-bottom: 10px; flex-shrink: 0; } .item-buy p { margin: 0 30px 10px 0; word-wrap: break-word; } .item-buy i { display: block; margin-bottom: 2px; font-family: "Georgia", "Times", serif; font-style: italic; font-size: 13px; font-weight: 400; color: #000000; } .price-old i { margin-bottom: 3px; } p.price-new { margin-right: 0; font-weight: 700; font-size: 18px; color: #ff8a00; } .button { display: flex; flex-shrink: 0; max-width: 462px; padding: 8px 24px 7px; margin-bottom: 40px; text-align: center; color: #ffffff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background-color: #ff8a00; border-radius: 4px; box-shadow: 0 4px 4px rgba(255, 138, 0, 0.4); } .button:hover, .button:focus { background-color: #ff9900; box-shadow: 0 6px 8px rgba(255, 138, 0, 0.4); } .button:active { background-color: #ff8a00; box-shadow: 0 2px 2px rgba(255, 138, 0, 0.6); } .order-list { width: 100%; margin: 10px 0 20px; border-collapse: collapse; text-align: left; } .order-list img { width: 68px; height: 52px; margin-bottom: -5px; } .order-list tr { border-bottom: 1px solid #e2e2e2; } .order-list td { padding: 10px 20px 10px 0; } .order-list th:last-child { width: 140px; } .order-list th { padding: 10px 20px 10px 0; font-family: "Georgia", "Times", serif; font-style: italic; font-weight: 400; vertical-align: bottom; } .order-list td:last-child, .order-list th:last-child { padding-right: 0; } .contacts-info { margin: -10px 0 20px; } .contacts-info p { position: relative; padding-left: 16px; margin: 12px 0; } .contact-phone::before { position: absolute; content: ""; width: 10px; height: 13px; top: 2px; left: 0; background-image: url("img/icon-phone.svg"); } .contact-address::before { position: absolute; content: ""; width: 9px; height: 13px; top: 2px; left: 0; background-image: url("img/icon-pin.svg"); } .delivery-background { display: flex; flex-shrink: 0; align-items: center; margin: 20px 0 20px; min-height: 200px; background-image: url("img/delivery-background.jpg"); background-repeat: no-repeat; background-position: center left; } .delivery-text { width: 210px; margin-left: auto; padding: 16px 20px 20px; background-color: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .delivery-text p { margin: 8px; padding: 0; } .brands { padding-top: 20px; padding-bottom: 4px; background-color: #f8f8f8; } .brands-list { display: flex; padding: 0; margin: 16px -20px 0 0; flex-wrap: wrap; list-style: none; } .brands-list li { position: relative; width: 112px; margin: 0 20px 16px 0; padding-top: 58px; } .brands-list li::before { position: absolute; content: ""; top: 0; left: 0; width: 112px; height: 50px; background-repeat: no-repeat; } .brands-ehm::before { background-image: url("img/brands-ehm-grey.svg"); } .brands-cubic::before { background-image: url("img/brands-cubic-grey.svg"); } .brands-tehnodom::before { background-image: url("img/brands-tehnodom-grey.svg"); } .brands-dg::before { background-image: url("img/brands-dg-grey.svg"); } .brands-ehm:hover::before { background-image: url("img/brands-ehm.svg"); } .brands-cubic:hover::before { background-image: url("img/brands-cubic.svg"); } .brands-tehnodom:hover::before { background-image: url("img/brands-tehnodom.svg"); } .brands-dg:hover::before { background-image: url("img/brands-dg.svg"); } .features { padding-top: 20px; padding-bottom: 10px; } .brands-title, .features-title, .services-title, .products-title { margin: 0; padding: 0; font-family: "Georgia", "Times", serif; font-size: 20px; line-height: 24px; font-weight: 400; } .features-list { display: flex; padding: 0; margin: 14px 0 0; justify-content: space-between; flex-wrap: wrap; list-style: none; } .features-list li { position: relative; width: 142px; margin-bottom: 10px; } .features-list li::before { position: absolute; content: ""; top: 2px; left: 0; } .feature-unique { padding-left: 22px; } .feature-unique::before { width: 16px; height: 12px; background-image: url("img/feature-unique.svg"); } .feature-organic { padding-left: 25px; } .feature-organic::before { width: 19px; height: 12px; background-image: url("img/feature-organic.svg"); } .feature-protected { padding-left: 16px; } .feature-protected::before { width: 10px; height: 12px; background-image: url("img/feature-protected.svg"); } .site-footer { background-color: #847462; } .site-footer .container { display: flex; flex-grow: 1; justify-content: space-between; } .copyright { margin: auto 0; flex-shrink: 0; color: #ffffff; } .site-footer .navigation-list { margin-right: 15px; margin-left: -15px; justify-content: left; } .copyright + .navigation-list { justify-content: center; margin-left: 15px; } .site-footer a { display: block; margin: 0; padding: 14px 15px; color: #ffffff; } .social-list { display: flex; width: 110px; padding: 0; margin: 0 -10px 2px; justify-content: end; flex-shrink: 0; flex-wrap: wrap; align-items: center; list-style: none; } .social-list a { display: block; width: 14px; height: 14px; padding: 10px; background-repeat: no-repeat; background-position: center; } .social-link-twitter { background-image: url("img/icon-twitter.svg"); } .social-link-instagram { background-image: url("img/icon-instagram.svg"); } .social-link-facebook { background-image: url("img/icon-facebook.svg"); } .social-list a:hover, .social-list a:focus { opacity: 0.5; } .social-list a:active { opacity: 0.3; } .pagination { display: flex; flex-wrap: wrap; margin: 10px -10px -10px 0; padding: 0; list-style: none; } .pagination a { display: flex; padding: 8px 16px; margin: 0 10px 10px 0; color: #ff8a00; border: 1px solid #ff8a00; border-radius: 4px; cursor: pointer; } .pagination a:empty { display: none; } .pagination a:focus, .pagination a:hover { color: #ffffff; background-color: #ff8a00; } .pagination a:active { box-shadow: inset 0 2px 10px #c86c00; } .pagination a.current { color: #ffffff; background-color: #ff8a00; box-shadow: inset 0 2px 10px #c86c00; cursor: default; } .banner { display: flex; justify-content: center; align-items: center; height: 96px; width: 100%; background-color: #FF8A00; background-image: url("img/bg_img.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; } .banner p { width: 380px; color: #333333; font-family: "Georgia", "Times", serif; font-size: 16px; line-height: 22px; text-align: center; } .product-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 10; background: rgba(100, 72, 212, 0.3); border: 3px solid #6448D4; } .product-card::after { content: attr(data-index); position: absolute; top: 0; left: 0; z-index: 20; box-sizing: border-box; width: 35px; height: 34px; padding-top: 8px; font-family: "Arial", sans-serif; font-size: 18px; line-height: 18px; font-weight: bold; text-align: center; color: #FFFFFF; background: #6448D4; }