My Pen on CodePen
Tags: codepen
Published: 2024-05-27 16:54:20

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fastlink IT Shop and Accessories</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #blue;
      color: #334;
    }

    header {
      background-color: #4CAF50;
      color: white;
      padding: 1rem;
      text-align: center;
    }

    nav {
      display: flex;
      justify-content: center;
      background-color: #333;
    }

    nav a {
      color: white;
      padding: 14px 20px;
      text-decoration: none;
      text-align: center;
    }

    nav a:hover {
      background-color: #ddd;
      color: black;
    }

    .container {
      padding: 20px;
    }

    .section {
      margin-bottom: 20px;
      padding: 20px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 1rem;
      position: fixed;
      width: 100%;
      bottom: 0;
    }

    .social-icons {
      list-style-type: none;
      padding: 0;
      display: flex;
      justify-content: center;
    }

    .social-icons li {
      margin: 0 10px;
    }

    .social-icons a {
      color: white;
      text-decoration: none;
    }

    .products-gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .product {
      flex: 1 1 calc(33.333% - 20px);
      background-color: #fff;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    .product img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
    }

    .marquee {
      overflow: hidden;
      white-space: nowrap;
      box-sizing: border-box;
    }

    .marquee img {
      display: inline-block;
      padding: 0 10px;
    }

    @keyframes marquee {
      0% {
        transform: translateX(100%);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    .marquee {
      animation: marquee 15s linear infinite;
    }
  </style>
</head>

<body>

  <header>
    <h1>Fastlink IT Shop and Accessories</h1>
  </header>

  <nav>
    <a href="#home">Home</a>
    <a href="#about">About Us</a>
    <a href="#products">Products</a>
    <a href="#contact">Contact</a>
  </nav>

  <div class="container">
    <section id="home" class="section">
      <h2>Welcome to Fastlink IT Shop and Accessories</h2>
      <p>Your premier destination for top-notch IT accessories.</p>
      <div class="marquee">
        <img src="https://via.placeholder.com/150" alt="Product 1">
        <img src="https://via.placeholder.com/150" alt="Product 2">
        <img src="https://via.placeholder.com/150" alt="Product 3">
        <img src="https://via.placeholder.com/150" alt="Product 4">
        <img src="https://via.placeholder.com/150" alt="Product 5">
        <img src="https://via.placeholder.com/150" alt="Product 6">
      </div>
    </section>

    <section id="about" class="section">
      <h2>About Us</h2>
      <h3>Who We Are</h3>
      <p>Welcome to Fastlink IT Shop, your premier destination for top-notch IT accessories. Founded with a passion for technology and a commitment to customer satisfaction, we have been serving tech enthusiasts and professionals alike with the best products in the market.</p>
      <h3>Our Mission</h3>
      <p>At Fastlink IT Shop, our mission is to provide our customers with the highest quality IT accessories at competitive prices. We believe in delivering exceptional value and unparalleled service, ensuring that every customer finds the perfect solutions for their tech needs.</p>
      <h3>What We Offer</h3>
      <ul>
        <li>Computer Peripherals: Keyboards, mice, monitors, and more.</li>
        <li>Networking Equipment: Routers, switches, cables, and adapters.</li>
        <li>Storage Solutions: External hard drives, SSDs, USB flash drives.</li>
        <li>Audio and Video Accessories: Headphones, speakers, webcams.</li>
        <li>And much more!</li>
      </ul>
      <h3>Why Choose Us?</h3>
      <ul>
        <li><strong>Quality Assurance:</strong> We source our products from trusted manufacturers to ensure top-notch quality.</li>
        <li><strong>Competitive Prices:</strong> We offer the best prices on the market without compromising on quality.</li>
        <li><strong>Expert Support:</strong> Our knowledgeable team is always ready to assist you with any questions or concerns.</li>
        <li><strong>Fast Shipping:</strong> We provide prompt and reliable shipping to get your products to you as quickly as possible.</li>
      </ul>
    </section>

    <section id="products" class="section">
      <h2>Products</h2>
      <div class="products-gallery">
        <div class="product">
          <img src="https://ppeci.com/images/uploads/products/AUDIO_VIDEO.jpg" alt="Product 1">
          <h3>Product 1</h3>
          <p>Short description of Product 1.</p>
        </div>
        <div class="product">
          <img src="https://via.placeholder.com/150" alt="Product 2">
          <h3></h3>
          <p>Short description of Product 2.</p>
        </div>
        <div class="product">
          <img src="https://via.placeholder.com/150" alt="Product 3">
          <h3>Product 3</h3>
          <p>Short description of Product 3.</p>
        </div>
        <div class="product">
          <img src="https://via.placeholder.com/150" alt="Product 4">
          <h3></h3>
          <p>Short description of Product 4.</p>
        </div>
        <div class="product">
          <img src="" alt="Product 5">
          <h3>Product 5</h3>
          <p>Short description of Product 5.</p>
        </div>
        <div class="product">
          <img src="
                         https://www.arcserve.com/sites/default/files/2023-06/HDD%20vs%20SSD%20-%20AdobeStock_323405056%202.png" alt="Product 6">
          <h3>Product 6</h3>
          <p>Short description of Product 6.</p>
        </div>
      </div>
    </section>

    <section id="contact" class="section">
      <h2>Contact Us</h2>
      <p>You can reach us via email at <a href="mailto:info@fastlinkitshop.com">info@fastlinkitshop.com</a> or call us at (123) 456-7890.</p>
      <ul class="social-icons">
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Instagram</a></li>
        <li><a href="#">LinkedIn</a></li>
      </ul>
    </section>
  </div>

  <footer>
    <p>&copy; 2024 Fastlink IT Shop and Accessories. All rights reserved.</p>
  </footer>

</body>