web-project/home.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css/home.css">
  <!-- global resources -->
  <link rel="stylesheet" href="global.css">
  <script src="global.js"></script>
  <!-- end of global resources -->
  <title>Computer Builder</title>
</head>

<body>

  <!--nav bar-->
  <div class="topnav-container">
    <div class="topnav">
      <a href="home.html" class="logo">BOB INC.</a>
      <div class="topnav-links">
        <a href="home.html">HOME</a>
        <a href="profile.html">PROFILE</a>
        <a href="log.html">REGISTER</a>
        <a href="pc.html">YOUR PC</a>
        <a href="about.html">ABOUT</a>
      </div>
    </div>
  </div>
  <!-- end of nav bar -->

  <!-- search bar -->

  <!-- <form class="example"> -->
  <!-- <input type="text" placeholder="Search.." name="search"> <button type="submit"><i class="fa fa-search"></i></button> -->
  <!-- </form> -->

  <!-- end of search bar -->

  <!-- text body -->
  <div class="hero centered">
    <div class="hero-text">
      <span class="title">BUILD YOUR OWN COMPUTER</span>
      <span class="title">AND LEARN ABOUT YOUR PC AS YOU BUILD IT.</span>
      <span class="text">Offers people ways in where they can learn about their computers as they build it</span>
      <span class="text">to ensure maximum customer satisfaction.</span>
    </div>
    <img class="hero-image" src="images/pc-case.png">
  </div>
  <!-- end of text body -->


  <!-- buttons -->
  <div class="centered">
    <button class="pill" data-selected onclick="showAllCards()" id="all">All Components</button>
    <button class="pill" onclick="showCategory('core-components')" id="core-components">Core Components</button>
    <button class="pill" onclick="showCategory('peripherals')" id="peripherals">Peripherals</button>
    <button class="pill" onclick="showCategory('storage')" id="storage">Storage Devices</button>
  </div>
  <!-- end of buttons -->

  <!-- cards -->
  <div class="card-grid centered">
    <a href="cpu.html" class="card" data-core-components>
      <h2 class="CT">CPU:</h2>
      <p class="Cf">Look for a suitable brain for your computer.<br><br>Choose from:<br>1. AMD<br>2. INTEL</p>
    </a>

    <a href="gpu.html" class="card" data-core-components>
      <h2 class="CT">GPU:</h2>
      <p class="Cf">Find the best Graphical Processing Unit for your system<br><br>Choose from:<br>1. AMD<br>2. NVIDIA
      </p>
    </a>

    <a href="ram.html" class="card" data-core-components>
      <h2 class="CT">RAM:</h2>
      <p class="Cf">Find the best ram for your system.<br><br>Load files quicker with better RAM.</p>
    </a>

    <a href="Internet.html" class="card" data-core-components data-peripherals>
      <h2 class="CT">INTERNET:</h2>
      <p class="Cf">For your computer to be able to access the internet you would need a network adapter, normally you
        can choose from: <br><br> 1. Wifi Adapters<br>2. Ethernet Adapaters</p>
    </a>

    <a href="case.html" class="card" data-core-components>
      <h2 class="CT">CASE:</h2>
      <p class="Cf">you need a case to put your pc parts inside.<br><br>Find the best case to house all of your
        computer’s Components.</p>
    </a>

    <a href="psu.html" class="card" data-core-components>
      <h2 class="CT">PSU:</h2>
      <p class="Cf">This deivce is used to provide your system with the necessary power in order to function<br><br>-
        ensure your PSU is rated to provide enough power to your system!</p>
    </a>

    <a href="hdd.html" class="card" data-storage>
      <h2 class="CT">HDD:</h2>
      <p class="Cf">These are storage devices known as Hard Disk Drive, these are typically robust and cheap and are
        able to retain a large amount of storage</p>
    </a>

    <a href="ssd.html" class="card" data-storage>
      <h2 class="CT">SSD:</h2>
      <p class="Cf">These are a storage devices known as Solid State Drive, these tend to be the more expensive and
        smaller counter part to HDD however they are fast</p>
    </a>

    <a href="mouse.html" class="card" data-peripherals>
      <h2 class="CT">MOUSE:</h2>
      <p class="Cf">This is an input device used to input where you are pointing. You can find a large variety of these
        and they tend to be typically inexpensive.</p>
    </a>

    <a href="keyb.html" class="card" data-peripherals>
      <h2 class="CT">KEYBOARD:</h2>
      <p class="Cf">This is an input device used to input letters, such as typing. They come in 2 main forms which are:
        <br><br>1. Mechanical Keyboards<br>2. Membrane Keyboards</p>
    </a>

    <a href="monitor.html" class="card" data-peripherals>
      <h2 class="CT">MONITOR:</h2>
      <p class="Cf">To be able to visually see the output of your system you will need a display.<br><br>These displays
        can have different resolutions for a difference in quality and different refresh rates for smoothness.</p>
    </a>

    <a href="cooling.html" class="card" data-core-components="">
      <h2 class="CT">COOLING:</h2>
      <p class="Cf">In order to ensure that your system doesnt overheat, buy a cooler capable enough to keep your system
        adequately cool!</p>
    </a>

  </div>
  <!-- end of cards -->

</body>

</html>