{"id":180,"date":"2026-10-23T14:53:48","date_gmt":"2026-10-23T14:53:48","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/a_mehraban\/?p=180"},"modified":"2026-10-23T14:53:48","modified_gmt":"2026-10-23T14:53:48","slug":"free-friday-assigment-10-23-2026","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/a_mehraban\/2026\/10\/23\/free-friday-assigment-10-23-2026\/","title":{"rendered":"free friday assigment 10\/23\/2026"},"content":{"rendered":"\n

so i made a website that can use to sell games <\/p>\n\n\n\n

I got some help from gogle a little bit down here you can see index.html<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <meta name=\"theme-color\" content=\"#0b0d14\">\n  <meta name=\"description\" content=\"Discover your next favorite indie game at Pixel Vault.\">\n  <title>Pixel Vault \u2014 Find Your Next Favorite Game<\/title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n\n<body>\n  <header>\n    <a class=\"brand\" href=\"#\" aria-label=\"Pixel Vault home\">\n      <span class=\"brand-icon\" aria-hidden=\"true\">\u25a3<\/span>\n      <h1>Pixel Vault<\/h1>\n    <\/a>\n\n    <button id=\"cart-button\" type=\"button\" aria-haspopup=\"dialog\">\n      \ud83d\uded2 Cart <span class=\"cart-count\" id=\"count\" aria-live=\"polite\">0<\/span>\n    <\/button>\n  <\/header>\n\n  <main>\n    <section class=\"hero\">\n      <p class=\"eyebrow\">THE INDIE GAME COLLECTION<\/p>\n      <h2>Enter a new<br><span>kind of world.<\/span><\/h2>\n      <p class=\"hero-copy\">\n        From far-off galaxies to neon-lit streets, your next great adventure\n        is waiting.\n      <\/p>\n      <a class=\"hero-link\" href=\"#featured\">Explore the collection <span aria-hidden=\"true\">\u2193<\/span><\/a>\n      <div class=\"hero-decoration\" aria-hidden=\"true\">\u2726<\/div>\n    <\/section>\n\n    <section class=\"collection\" id=\"featured\" aria-labelledby=\"games-heading\">\n      <div class=\"section-heading\">\n        <div>\n          <p class=\"eyebrow\">HAND-PICKED FOR YOU<\/p>\n          <h2 id=\"games-heading\">Featured games<\/h2>\n        <\/div>\n        <span class=\"collection-note\">Digital games \u00b7 Instant access<\/span>\n      <\/div>\n\n      <div id=\"games\" class=\"games-grid\"><\/div>\n    <\/section>\n  <\/main>\n\n  <footer>\n    <p>\u00a9 2025 Pixel Vault <span>\u00b7<\/span> Good games. Great escapes.<\/p>\n  <\/footer>\n\n  <dialog id=\"cart\" aria-labelledby=\"cart-heading\">\n    <div class=\"cart-header\">\n      <h2 id=\"cart-heading\">Your cart<\/h2>\n      <button id=\"close-cart\" class=\"close-button\" type=\"button\" aria-label=\"Close cart\">\u00d7<\/button>\n    <\/div>\n\n    <div id=\"items\" aria-live=\"polite\"><\/div>\n\n    <div class=\"cart-total\">\n      <span>Total<\/span>\n      <strong>$<span id=\"total\">0.00<\/span><\/strong>\n    <\/div>\n\n    <div class=\"cart-actions\">\n      <button id=\"checkout\" type=\"button\">Checkout<\/button>\n    <\/div>\n    <p class=\"cart-note\">Secure checkout \u00b7 Digital delivery<\/p>\n  <\/dialog>\n\n  <script>\n    const games = [\n      {\n        name: \"Starfall Odyssey\",\n        description: \"Chart a course through a forgotten galaxy and uncover the secrets among the stars.\",\n        genre: \"SCI-FI ADVENTURE\",\n        price: 29.99,\n        icon: \"\u2726\",\n        art: \"starfall\"\n      },\n      {\n        name: \"Dungeon Bloom\",\n        description: \"A charming fantasy adventure where strange creatures and hidden gardens await.\",\n        genre: \"FANTASY ADVENTURE\",\n        price: 19.99,\n        icon: \"\u2740\",\n        art: \"dungeon\"\n      },\n      {\n        name: \"Neon Drift\",\n        description: \"Burn through rain-soaked streets in a high-speed race for the city crown.\",\n        genre: \"ARCADE RACING\",\n        price: 14.99,\n        icon: \"\u25c8\",\n        art: \"neon\"\n      }\n    ];\n\n    const basket = {};\n    const gamesDiv = document.getElementById(\"games\");\n    const countEl = document.getElementById(\"count\");\n    const cartDialog = document.getElementById(\"cart\");\n    const itemsEl = document.getElementById(\"items\");\n    const totalEl = document.getElementById(\"total\");\n    const checkoutButton = document.getElementById(\"checkout\");\n\n    const money = amount => amount.toFixed(2);\n\n    games.forEach((game, index) => {\n      const card = document.createElement(\"article\");\n      card.className = \"game-card\";\n\n      card.innerHTML = `\n        <div class=\"game-art ${game.art}\" aria-hidden=\"true\">\n          <span>${game.icon}<\/span>\n          <span class=\"art-orbit\"><\/span>\n        <\/div>\n        <div class=\"game-info\">\n          <span class=\"game-genre\">${game.genre}<\/span>\n          <h3>${game.name}<\/h3>\n          <p class=\"game-description\">${game.description}<\/p>\n          <div class=\"game-footer\">\n            <span class=\"game-price\">$${money(game.price)}<\/span>\n            <button class=\"add-button\" type=\"button\">Add to cart <span aria-hidden=\"true\">+<\/span><\/button>\n          <\/div>\n        <\/div>\n      `;\n\n      card.querySelector(\".add-button\").addEventListener(\"click\", event => {\n        addToCart(index);\n        event.currentTarget.innerHTML = \"Added <span aria-hidden='true'>\u2713<\/span>\";\n        window.setTimeout(() => {\n          event.currentTarget.innerHTML = \"Add to cart <span aria-hidden='true'>+<\/span>\";\n        }, 900);\n      });\n\n      gamesDiv.appendChild(card);\n    });\n\n    function addToCart(index) {\n      basket[index] = (basket[index] || 0) + 1;\n      updateCount();\n    }\n\n    function updateCount() {\n      countEl.textContent = Object.values(basket)\n        .reduce((sum, quantity) => sum + quantity, 0);\n    }\n\n    function showCart() {\n      const entries = Object.entries(basket);\n\n      if (entries.length === 0) {\n        itemsEl.innerHTML = '<p class=\"empty-cart\">Your cart is empty. Your next adventure is just a click away.<\/p>';\n      } else {\n        itemsEl.innerHTML = entries.map(([index, quantity]) => {\n          const game = games[index];\n          return `\n            <div class=\"cart-item\">\n              <div>\n                <strong>${game.name}<\/strong>\n                <p>$${money(game.price)} each<\/p>\n              <\/div>\n              <div class=\"quantity-controls\">\n                <button type=\"button\" data-change=\"${index}\" data-amount=\"-1\" aria-label=\"Remove one ${game.name}\">\u2212<\/button>\n                <span>${quantity}<\/span>\n                <button type=\"button\" data-change=\"${index}\" data-amount=\"1\" aria-label=\"Add one ${game.name}\">+<\/button>\n                <strong>$${money(game.price * quantity)}<\/strong>\n              <\/div>\n            <\/div>\n          `;\n        }).join(\"\");\n      }\n\n      const total = entries.reduce(\n        (sum, [index, quantity]) => sum + games[index].price * quantity,\n        0\n      );\n\n      totalEl.textContent = money(total);\n      checkoutButton.disabled = entries.length === 0;\n      cartDialog.showModal();\n    }\n\n    itemsEl.addEventListener(\"click\", event => {\n      const button = event.target.closest(\"[data-change]\");\n      if (!button) return;\n\n      const index = button.dataset.change;\n      basket[index] += Number(button.dataset.amount);\n\n      if (basket[index] <= 0) delete basket[index];\n\n      updateCount();\n      showCart();\n    });\n\n    document.getElementById(\"cart-button\").addEventListener(\"click\", showCart);\n    document.getElementById(\"close-cart\").addEventListener(\"click\", () => cartDialog.close());\n\n    cartDialog.addEventListener(\"click\", event => {\n      if (event.target === cartDialog) cartDialog.close();\n    });\n\n    checkoutButton.addEventListener(\"click\", () => {\n      alert(\"Demo checkout only. Connect a payment provider to accept real payments.\");\n    });\n  <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
after index.html down here will be style.css<\/p>\n\n\n\n
.brand {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: white;\n  text-decoration: none;\n}\n\n.brand h1 { margin: 0; }\n\n.brand-icon {\n  display: grid;\n  width: 38px;\n  height: 38px;\n  place-items: center;\n  border-radius: 11px;\n  background: #9b5cff;\n}\n\n.hero {\n  position: relative;\n  overflow: hidden;\n  margin: 24px 0 54px;\n  padding: clamp(32px, 7vw, 76px);\n  border: 1px solid #33304a;\n  border-radius: 22px;\n  background: radial-gradient(ellipse at 80% 20%, #38265c, transparent 45%), #141824;\n}\n\n.eyebrow, .game-genre {\n  color: #bd91ff;\n  font-size: .75rem;\n  font-weight: bold;\n  letter-spacing: .14em;\n}\n\n.hero h2 {\n  margin: 12px 0;\n  font-size: clamp(2.5rem, 7vw, 5rem);\n  line-height: .98;\n  letter-spacing: -.06em;\n}\n\n.hero h2 span { color: #bd91ff; }\n.hero-copy { max-width: 450px; color: #b7bbca; }\n\n.hero-link {\n  display: inline-block;\n  margin-top: 14px;\n  color: white;\n  font-weight: bold;\n  text-decoration: none;\n}\n\n.hero-link span { color: #bd91ff; }\n\n.hero-decoration {\n  position: absolute;\n  top: 12%;\n  right: 12%;\n  color: #bd91ff;\n  font-size: clamp(6rem, 20vw, 14rem);\n  opacity: .18;\n}\n\n.section-heading {\n  display: flex;\n  align-items: end;\n  justify-content: space-between;\n  gap: 16px;\n  margin-bottom: 18px;\n}\n\n.section-heading h2 { margin: 4px 0 0; }\n.collection-note, footer { color: #a7adbd; }\n\n.games-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n  gap: 18px;\n}\n\n.game-card {\n  overflow: hidden;\n  border: 1px solid #333;\n  border-radius: 14px;\n  background: #141824;\n  transition: transform .2s, border-color .2s;\n}\n\n.game-card:hover {\n  transform: translateY(-4px);\n  border-color: #9b5cff;\n}\n\n.game-art {\n  position: relative;\n  display: grid;\n  height: 180px;\n  overflow: hidden;\n  place-items: center;\n}\n\n.game-art > span:first-child {\n  z-index: 1;\n  font-size: 5rem;\n  text-shadow: 0 0 35px currentColor;\n}\n\n.starfall { color: #dfc7ff; background: radial-gradient(circle, #60428e, #171a38 70%); }\n.dungeon { color: #b8ffd1; background: radial-gradient(circle, #39745e, #172b32 70%); }\n.neon { color: #ff9be7; background: radial-gradient(circle, #9a3d8f, #211d48 70%); }\n\n.art-orbit {\n  position: absolute;\n  width: 150px;\n  height: 55px;\n  border: 1px solid currentColor;\n  border-radius: 50%;\n  opacity: .5;\n  transform: rotate(-25deg);\n}\n\n.game-info { padding: 18px; }\n.game-genre { font-size: .65rem; }\n.game-info h3 { margin: 8px 0; }\n.game-description { min-height: 66px; color: #a7adbd; font-size: .9rem; }\n\n.game-footer, .cart-total, .cart-item, .quantity-controls {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n}\n\n.game-price { font-size: 1.1rem; font-weight: bold; }\n\n.add-button span { margin-left: 5px; font-size: 1.1rem; }\n\nfooter {\n  padding: 20px 7%;\n  text-align: center;\n  font-size: .85rem;\n}\n\ndialog {\n  width: min(480px, calc(100% - 32px));\n  color: white;\n  background: #141824;\n}\n\ndialog::backdrop { background: rgb(0 0 0 \/ 70%); backdrop-filter: blur(3px); }\n\n.cart-header, .cart-total {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.close-button {\n  padding: 4px 10px;\n  background: #292e3d;\n  font-size: 1.3rem;\n}\n\n.cart-item {\n  padding: 14px 0;\n  border-bottom: 1px solid #333;\n}\n\n.cart-item p, .cart-note { margin: 4px 0 0; color: #a7adbd; font-size: .85rem; }\n\n.quantity-controls button {\n  padding: 5px 9px;\n  background: #292e3d;\n}\n\n.cart-total { padding: 16px 0; }\n.cart-actions button { width: 100%; }\n.cart-note { text-align: center; }\n.empty-cart { color: #a7adbd; text-align: center; }\n\nbutton:disabled { cursor: not-allowed; opacity: .5; }\n\n@media (max-width: 600px) {\n  .section-heading { align-items: start; flex-direction: column; }\n  .hero { margin-top: 16px; }\n  .cart-item { align-items: start; flex-direction: column; }\n}<\/code><\/pre>\n\n\n\n
here you can see how it look like <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
hope you like it <\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
so i made a website that can use to sell games I got some help from gogle a little bit […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-180","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/comments?post=180"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/180\/revisions"}],"predecessor-version":[{"id":182,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/180\/revisions\/182"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/media?parent=180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/categories?post=180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/tags?post=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}