[text] Online store

Viewer

copydownloadembedprintName: Online store
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Your Digital Products Store</title>
  7.     <style>
  8.         body {
  9.             font-family: Arial, sans-serif;
  10.             margin: 0;
  11.             padding: 0;
  12.             background-color: #f0f0f0;
  13.         }
  14.         header {
  15.             background-color: #333;
  16.             color: #fff;
  17.             padding: 10px 20px;
  18.             text-align: center;
  19.         }
  20.         nav {
  21.             background-color: #444;
  22.             padding: 10px;
  23.             text-align: center;
  24.         }
  25.         nav a {
  26.             color: #fff;
  27.             text-decoration: none;
  28.             margin: 0 10px;
  29.         }
  30.         nav a:hover {
  31.             text-decoration: underline;
  32.         }
  33.         .container {
  34.             max-width: 800px;
  35.             margin: 20px auto;
  36.             padding: 20px;
  37.             background-color: #fff;
  38.             border-radius: 5px;
  39.             box-shadow: 0 0 10px rgba(0,0,0,0.1);
  40.         }
  41.         .product {
  42.             margin-bottom: 20px;
  43.             padding: 10px;
  44.             background-color: #f9f9f9;
  45.             border-radius: 5px;
  46.             box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  47.         }
  48.         .product img {
  49.             max-width: 100%;
  50.             height: auto;
  51.             border-radius: 5px;
  52.         }
  53.         .product h2 {
  54.             margin-top: 0;
  55.         }
  56.         .product p {
  57.             margin-bottom: 10px;
  58.         }
  59.         footer {
  60.             background-color: #333;
  61.             color: #fff;
  62.             text-align: center;
  63.             padding: 10px 0;
  64.             position: fixed;
  65.             width: 100%;
  66.             bottom: 0;
  67.         }
  68.     </style>
  69. </head>
  70. <body>
  71.     <header>
  72.         <h1>Your Digital Products Store</h1>
  73.     </header>
  74.     <nav>
  75.         <a href="#">Home</a>
  76.         <a href="#">Products</a>
  77.         <a href="#">About</a>
  78.         <a href="#">Contact</a>
  79.     </nav>
  80.     <div class="container">
  81.         <div class="product">
  82.             <img src="product1.jpg" alt="Product 1">
  83.             <h2>Product 1 Name</h2>
  84.             <p>Description of Product 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  85.             <p>Price: $19.99</p>
  86.             <a href="#">Buy Now</a>
  87.         </div>
  88.         <div class="product">
  89.             <img src="product2.jpg" alt="Product 2">
  90.             <h2>Product 2 Name</h2>
  91.             <p>Description of Product 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  92.             <p>Price: $24.99</p>
  93.             <a href="#">Buy Now</a>
  94.         </div>
  95.         <!-- Add more products as needed -->
  96.     </div>
  97.     <footer>
  98.         <p>© 2024 Your Digital Products Store. All rights reserved.</p>
  99.     </footer>
  100. </body>
  101. </html>

Editor

You can edit this paste and save as new:


File Description
  • Online store
  • Paste Code
  • 28 Jun-2024
  • 2.82 Kb
You can Share it: