<div class="titulo">
    <h3>Selecione um computador</h3>
</div>
    <div class="option">
        <div class="card" style="width: 18rem; display: inline-block; margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 1</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem; display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 2</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 3</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 4</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 5</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 6</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 7</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 8</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 9</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 10</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 11</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 12</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 13</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 14</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 15</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 16</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 17</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: inline-block;margin:30px;">
            <img src="/figmaSchoolLab/SCHOLLLABUFC.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Computador 18</h5>
              <p class="card-text"><span><strong>Nome:</strong></span></p>
              <p class="card-text"><span><strong>Email:</strong></span></p>
              <p style="display: none;"><span style="background-color: #8344ff; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #8344ff;">.</span>Online</p>
              <p><span style="background-color: #363636; border-radius: 50%;padding: 0px 10px 5px 10px;margin-right: 10px;color: #363636;">.</span>Offline</p>
            </div>
        </div>
    </div>