site-picote (prototipo)

42Biro commented 3 months ago

<!DOCTYPE html>

Picote - Windows 95

Serviço 1

Serviço 2

Sobre

Serviço 1

Serviço de Fotografia

Oferecemos serviços de fotografia para casamentos, eventos e sessões de fotos profissionais. Nosso objetivo é capturar momentos únicos com qualidade e estilo.

Com mais de 10 anos de experiência, garantimos que suas lembranças sejam eternizadas de forma elegante e artística. Trabalhamos com equipamentos de alta qualidade e técnicas avançadas para garantir os melhores resultados.

Interessado? Entre em contato conosco para agendar uma consulta e descobrir como podemos ajudar a capturar seus momentos especiais.

Serviço 2

Conteúdo do Serviço 2.

Sobre

Informações sobre a Picote.

42Biro commented 3 months ago

`body { margin: 0; font-family: "MS Sans Serif", sans-serif; background-color: #008080; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.taskbar { position: fixed; top: 0; width: 100%; height: 40px; background-color: #C0C0C0; border-bottom: 2px solid #808080; display: flex; align-items: center; justify-content: space-between; z-index: 10; }

.taskbar-logo { display: flex; align-items: center; background-color: #C0C0C0; border-right: 2px solid #808080; height: 100%; width: 100px; / Aumentei a largura do botão / cursor: pointer; justify-content: center; overflow: hidden; }

.taskbar-logo img { width: 100%; height: 100%; object-fit: cover; }

.taskbar-items { display: flex; align-items: center; }

.taskbar-item { margin-left: 10px; padding: 0 10px; background-color: #E0E0E0; border: 1px solid #808080; border-radius: 2px; display: none; align-items: center; justify-content: center; height: 100%; font-size: 12px; box-shadow: inset 1px 1px #FFF, inset -1px -1px #000; }

.desktop { display: flex; flex-wrap: wrap; padding: 60px 20px; justify-content: flex-start; align-items: flex-start; flex: 1; }

.icon { width: 80px; text-align: center; margin: 10px; cursor: pointer; }

.icon img { width: 48px; height: 48px; margin-bottom: 5px; }

.window { position: fixed; width: 300px; height: 400px; background-color: #C0C0C0; border: 2px solid #808080; display: none; flex-direction: column; overflow: hidden; z-index: 5; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 70%; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); }

.window-header { background-color: #000080; color: white; padding: 5px; display: flex; justify-content: space-between; align-items: center; }

.window-header button { background-color: #C0C0C0; border: 1px solid #808080; cursor: pointer; margin-left: 5px; }

.window-content { flex: 1; background-color: white; overflow-y: auto; padding: 10px; }

.cta-button { background-color: #008080; color: white; border: none; padding: 10px; text-align: center; margin-top: 10px; cursor: pointer; width: 100%; }

.cta-button:hover { background-color: #005050; }

@media (max-width: 600px) { .desktop { justify-content: center; align-items: center; }

.window {
    width: 90%;
    height: 70%;
}

} `

42Biro commented 3 months ago

`function openWindow(serviceId) { const windowElement = document.getElementById(serviceId); const taskbarItem = document.createElement('div'); taskbarItem.classList.add('taskbar-item'); taskbarItem.id =taskbar-${serviceId}`; taskbarItem.innerText = windowElement.querySelector('.window-header').innerText; document.getElementById('taskbar-items').appendChild(taskbarItem); taskbarItem.style.display = 'flex'; windowElement.style.display = 'flex'; }

function closeWindow(serviceId) { const windowElement = document.getElementById(serviceId); const taskbarItem = document.getElementById(taskbar-${serviceId}); taskbarItem.remove(); windowElement.style.display = 'none'; }

function goHome() { alert("Você clicou no botão Home! (Funcionalidade a ser implementada)"); }

function contactUs() { alert("CTA: Entrar em contato! (Funcionalidade a ser implementada)"); }

42Biro / site-picote

site-picote (prototipo) #1

Serviço de Fotografia