UNIVERSIDADE TECNOLÓGICA VISVESVARAYA

JNANA SANGAMA, BELAGAVI– 590 014

Relatório de Estágio sobre

SITE DE CAFETERIA
Submetido em cumprimento parcial dos requisitos para a concessão do B.E. em
Grau em Ciência da Computação e Engenharia.

Submitted by:

NIRMITHA S [1GG20CS04]

Realizado em

Varcons Tech Pvt Ltd.

213 2ndandar Ramanashree Arcade

Halasuru, Ashok Nagar Bangalore-560001

COLÉGIO DE ENGENHARIA DO GOVERNO

B.M. ROAD, RAMANAGARA-562 159

2023-24

1
 FACULDADE DE ENGENHARIA DO GOVERNO
BM ROAD, Ramanagara-562 159

Aferido ao VTU, Belagavi, APROVADO pelo AICTE Nova Délhi

CERTIFICADO
Este é para certificar que o Estágio intitulado "Site de Café" foi realizado
emitido por Ms NIRMITHA S, uma estudante regular da Engenharia do Governo
Faculdade Ramanagara em cumprimento parcial para a concessão do Bacharelado de

Engenharia, em CIÊNCIA DA COMPUTAÇÃO & ENGENHARIA sob

Universidade Tecnológica Visvesvaraya, Belagavi, durante o ano
20222023. É certificada que todas as correções/sugestões indicadas foram
foi incorporado no relatório.
O relatório do projeto foi aprovado pois satisfaz o acadêmico
requisitos em relação ao estágio prescritos para o curso
Estágio / Prática Profissional (18CSI85)

Assinatura do Guia Assinatura do HOD Assinatura do Principal

Nome do Examinador Assinatura

1. ……………………….. ……………………

2. ……………………….. ………………………

2
CERTIFICADO DE CONCLUSÃO

3
 DECLARAÇÃO
Eu, por meio deste, declaro que o relatório de estágio intitulado "Site de Cafeteria", submetido
em cumprimento parcial dos requisitos para a concessão do grau de
Bacharel em Engenharia (B.E) em Ciência da Computação e Engenharia
O departamento é um registro do trabalho de projeto genuíno realizado por mim.
sob a orientação do "Dr Chethan K C" para a ENGENHARIA GOVERNAMENTAL
COLÉGIO RAMANAGARA TECNOLOGIA VISVESVARAYA
UNIVERSIDADE. Declaro ainda que o trabalho relatado neste projeto não foi
submetido e não será submetido, seja em parte ou na totalidade, para a concessão de qualquer
outro grau ou diploma neste instituto ou em qualquer outro instituto ou universidade.

Assinatura do candidato

NIRMITHA S
(1GG20CS024)

4
 AGRADECIMENTO
Este estágio é o resultado de orientação, direção e apoio acumulados.
várias pessoas importantes. Aproveitamos esta oportunidade para expressar nossa gratidão a todos

quem nos ajudou a completar o estágio.

Agradecemos sinceramente ao nosso diretor por nos fornecer instalações adequadas para
realizar este estágio.

Gostaríamos de agradecer ao nosso Chefe de Departamento - código da filial, por nos proporcionar uma oportunidade

para realizar o estágio e por sua valiosa orientação e apoio.

Gostaríamos de agradecer ao nosso (nome do assistente de laboratório) Serviços de Software por nos guiar durante

o período de estágio.

Expressamos nossa profunda e sincera gratidão ao nosso guia, Nome do guia,

Professora Assistente/Associada, pelo seu grande interesse e incentivo em cada passo em

completando o Estágio.

Gostaríamos de agradecer a todos os membros do corpo docente do nosso departamento pelo apoio concedido.

durante o curso do Estágio.

Gostaríamos de agradecer aos membros não docentes do nosso departamento, por nos ajudarem durante o
Estágio.

Por fim, gostaríamos de agradecer aos nossos pais e amigos, sem os quais
ajuda constante, a conclusão do estágio não teria sido possível.

NAME: NIRMITHA S

USN: 1GG20CS024

5
 RESUMO
No agitado mundo de hoje, o café se tornou mais do que apenas uma bebida; é uma questão cultural.
fenômeno e um ritual diário para milhões. Este resumo apresenta um site de café.
projetado para capturar a essência desta bebida amada, oferecendo um refúgio virtual para o café
entusiastas para explorar, aprender e se deliciar.

Nosso site tem como objetivo criar uma experiência de café imersiva, onde os visitantes podem embarcar em uma jornada

através da rica história do café, descubra técnicas de preparo artesanal e explore uma seleção
seleção de grãos premium de todo o mundo. Do conforto de suas casas, os usuários
pode navegar pelo nosso cardápio de blends de café meticulosamente elaborados, cada um selecionado a dedo para oferecer
uma sensação de sabor única e inesquecível.

Mas nosso site é mais do que apenas um lugar para pedir café; é um centro comunitário onde o café
os amantes podem se conectar, compartilhar sua paixão e aprender com especialistas na área. Através de interativo
fóruns, eventos ao vivo e recursos educacionais, os usuários podem aprofundar seu conhecimento sobre café
cultura e expandir suas habilidades de produção de cerveja.

Com uma interface amigável e navegação sem interrupções, nosso site convida os visitantes a embarcar
em uma jornada de descoberta, despertando seus sentidos para o mundo do café especial. Seja
eles estão em busca da perfeita bebida matinal ou simplesmente desejando um momento de indulgência, nosso
o site promete ser um destino onde os sonhos do café ganham vida.

Junte-se a nós enquanto celebramos a arte, a tradição e a alegria do café, uma xícara de cada vez, no digital
reino. Bem-vindo ao nosso refúgio virtual de café – onde cada gole conta uma história e cada visita é um
viagem de sabor e aroma.

6
Índice
CAPÍTULO 1: SOBRE A EMPRESA…………………………… 8
CHAPTER 2:TECHNOLOGIES LEARNT ......................................... 9
2.1 HTML ........................................................................................... 9
2.2 CSS ............................................................................................... 9
2.3 JS-JavaScript .............................................................................. 10
2.4 React-js (ferramenta de software utilizada): ...................................................... 10

CAPÍTULO 3: MINI PROJETO / ESTUDO DE CASO

3.1 INTRODUÇÃO ...................................................................... 12

3.2 PESQUISA DO PROJETO ................................................................... 13
3.3 ESPECIFICAÇÃO DOS REQUISITOS DE HARDWARE ................. 14
3.4 ESPECIFICAÇÃO DE REQUISITOS DE SOFTWARE ............
3.5 DESIGN DO SISTEMA .................................................................... 15
3.6 CÓDIGO-FONTE ........................................................................ 16
3.7 RESULTADO..................................................................................... 39
CONCLUSION ................................................................................... 42
REFERÊNCIAS ............................

7
 CHAPTER 1:
SOBRE A EMPRESA
Introdução da Empresa

A Varcons Technologies Pvt Ltd é uma organização de tecnologia que oferece soluções para toda a web
design e desenvolvimento, MYSQL, programação PYTHON, HTML, CSS, [Link] e
LINQ. Atendendo às crescentes demandas de automação, a Varcons Technologies
especializar-se em ERP, Conectividade, Serviços de SEO, Gestão de Conferências, web eficaz
promoção e produtos de software sob medida, projetando soluções que melhor atendam às necessidades do cliente

requisitos. A organização onde eles têm uma combinação adequada de profissionais como partes interessadas
para nos ajudar a atender nossos clientes com o melhor de nossa capacidade e com padrões da indústria equivalentes.

Eles têm profissionais jovens, entusiasmados, apaixonados e criativos para desenvolver.

inovações tecnológicas no campo das tecnologias móveis,
Departamentos e serviços oferecidos.

A Varcons Technologies Pvt Ltd desempenha um papel essencial como um instituto, o nível de educação,
O desenvolvimento das habilidades dos alunos é baseado em seus treinadores. Se você não tiver um bom
mentor, então você pode ficar atrás de muitos aspectos em relação aos outros e é por isso que nós da Varcons

A Technologies Pvt Ltd oferece a você a facilidade de funcionários qualificados para que você não se sinta

inseguro em relação aos acadêmicos. O desenvolvimento da personalidade e o status acadêmico são alguns de

aquelas coisas que estão nas mãos do mentor.

Serviços prestados pela Empresa.

• Java Core e Java Avançado

• Serviços web e desenvolvimento

• Dot Net Framework

• Python

• Selenium Testing
Serviço de Gestão de Conferências / Eventos

• Orientação de Projetos Acadêmicos

Treinamento no Trabalho
Treinamento de Software

8
 CAPÍTULO 2:
TECNOLOGIAS APRENDIDAS
2.1 HTML
HTML significa Linguagem de Marcação de Hipertexto. É uma linguagem de marcação padrão
para a criação de páginas da web. Permite a criação e estruturação de seções, parágrafos,
e links usando elementos HTML (os blocos de construção de uma página da web) como etiquetas
e atributos.
HTML tem muitos casos de uso, nomeadamente:

Desenvolvimento web. Os desenvolvedores usam código HTML para projetar como um navegador

exibe elementos de páginas da web, como texto, hyperlinks e arquivos de mídia.

Navegação na internet. Os usuários podem navegar facilmente e inserir links entre páginas relacionadas
e sites como HTML são amplamente usados para incorporar hyperlinks.
•Documentação web. HTML torna possível organizar e formatar documentos,
semelhante ao Microsoft Word.

2.2 CSS
CSS significa Folhas de Estilo em Cascata. É uma linguagem de folha de estilo que é
usado para descrever a aparência e formatação de um documento escrito em markup
linguagem. Oferece um recurso adicional ao HTML. Geralmente é usado com
HTML para alterar o estilo de páginas da web e interfaces de usuário. Também pode ser usado
com qualquer tipo de documentos XML, incluindo XML simples, SVG e XUL.
CSS é usado junto com HTML e JavaScript na maioria dos sites para criar usuários
interfaces para aplicações web e interfaces de usuário para muitos aplicativos móveis.

• CSS é usado para projetar tags HTML.

• CSS é uma linguagem amplamente utilizada na web.
• HTML, CSS e JavaScript são usados para design de sites. Isso ajuda os web designers
aplicar estilo em tags HTML.

Características do CSS:

•Maintenance: It is easy to maintain, changing in a single place will affect globally in

seu site. Não há necessidade de mudar cada lugar específico.
•Economia de tempo: Você pode usar facilmente qualquer script CSS único em vários lugares.

•Suporte: CSS é suportado por todos os navegadores e motores de busca.

9
 •Armazenamento em cache: CSS pode armazenar aplicativos da web localmente com a ajuda do cache offline

então você pode ver o site quando estiver offline.

•Frontend nativo: CSS contém uma enorme lista de atributos e funções que são úteis para
desenhe a página HTML.
•Seletores: No CSS, existem muitos seletores (seletores de ID, seletores de classe, etc.) que
será útil para realizar tarefas específicas

2.3 JS-JavaScript
JavaScript (JS) é o mais popular leve, compilado interpretado
linguagem de programação. Pode ser usado tanto no lado do cliente quanto
Desenvolvimentos do lado do servidor. JavaScript também é conhecido como uma linguagem de script para

páginas da web. Este Tutorial de JavaScript é projetado para ajudar tanto iniciantes quanto

profissionais experientes dominam os fundamentos do JavaScript e liberam

sua criatividade para construir aplicações web poderosas. Desde a sintaxe básica e
tipos de dados a tópicos avançados, como programação orientada a objetos e DOM
manipulação.

Como o JavaScript Melhora a Construção de Sites em HTML?

O JavaScript é uma linguagem de programação avançada que torna as páginas da web mais
interativo e dinâmico, enquanto o HTML é uma linguagem de marcação padrão que fornece
a estrutura primária de um site.
•Isso simplesmente adiciona conteúdo dinâmico aos sites para torná-los bonitos e o trabalho em HTML.

sobre a aparência do site sem os efeitos interativos e tudo mais.

•Ele manipula o conteúdo para criar páginas da web dinâmicas, enquanto as páginas HTML são
estático, o que significa que o conteúdo não pode ser alterado.
• Não é compatível com navegadores diferentes, enquanto o HTML é compatível com navegadores diferentes.

•Pode ser incorporado dentro do HTML, mas o HTML não pode ser incorporado dentro do JavaScript.

2.4 React-js(software tool used):

[Link], mais comumente conhecido como React, é uma biblioteca JavaScript gratuita e de código aberto. Ela funciona
é melhor construir interfaces de usuário combinando seções de código (componentes) em sites completos.
Originalmente construída pelo Facebook, a Meta e a comunidade de código aberto agora a mantêm. Um
Uma das boas coisas sobre o React é que você pode usá-lo tanto quanto quiser ou tão pouco quanto desejar!
exemplo, você pode construir todo o seu site em React ou apenas usar um único componente React em
uma página.

10
[Link] é construído usando JSX - uma combinação de JavaScript e XML. Elementos são criados
usando JSX, então use JavaScript para renderizá-los em seu site. Embora o React tenha uma curva de aprendizado acentuada
a curva para um desenvolvedor júnior está rapidamente se tornando uma das mais populares e em demanda
Bibliotecas JavaScript.

React is considered a JavaScript library rather than a framework, whereas the other options
we’ll consider today are considered frameworks. It helps to think of a library as a tool that
os desenvolvedores poderiam usar em qualquer projeto e um framework como um todo design.

Houve um enorme aumento na popularidade do [Link], como encontrado nos estudos da State.
Do JS. Isso é parcialmente devido à sua flexibilidade e velocidade de desenvolvimento, mas também ajudado pela
o fato de ser apoiado pela Meta, fazendo com que desenvolvedores e empresas se sintam seguros em sua decisão
usar o React. Portanto, a demanda por desenvolvedores React é muito alta. Como resultado, há
uma ampla gama de empregos para desenvolvedores que sabem como usar React.

11
 CHAPTER 3:
MINI PROJETO / ESTUDO DE CASO

3.1 INTRODUÇÃO

No atual panorama digital acelerado, estabelecer uma presença online atraente é

imperativo para as empresas que buscam prosperar em um mercado cada vez mais competitivo. Nosso
o projeto do site da cafeteria se esforça para fechar a lacuna entre o tradicional em tijolos e
e estabelecimento físico e o reino digital, oferecendo uma experiência contínua e imersiva
experiência tanto para novos quanto para clientes fiéis.

No coração deste projeto reside a aspiração de criar uma plataforma online cativante que
não apenas reflete o charme e o caráter do nosso café, mas também fornece práticas
e recursos envolventes para melhorar a experiência do cliente. Desde a apresentação do nosso
menu cuidadosamente elaborado de cafés artesanais e iguarias deliciosas para oferecer conveniência
opções de pedidos online e reservas, o site tem como objetivo servir como uma extensão virtual
do nosso espaço físico, convidando os visitantes a se entregarem ao calor e à hospitalidade que
defina nossa marca.

Com uma compreensão aguçada das preferências e comportamentos do nosso público-alvo, buscamos
personalizar o site para atender eficazmente às suas necessidades e expectativas. Seja local
residentes em busca de um lugar aconchegante para relaxar, aficionados por café em busca do perfeito
cervejeiros, ou profissionais que buscam um ambiente propício para reuniões, nosso site tem como objetivo
atender a diversas demografias enquanto promove um senso de comunidade e pertencimento.

Além disso, ao aproveitar os mais recentes avanços em tecnologia e design da web

princípios, pretendemos criar um site visualmente deslumbrante e intuitivo que cative
visitantes a partir do momento em que chegam à página inicial. Através de uma navegação integrada,
imagens de alta qualidade e elementos interativos, esforçamo-nos para criar uma experiência online imersiva
experiência que deixa uma impressão duradoura e incentiva visitas repetidas.

Em essência, o nosso projeto de site para a cafeteria representa não apenas um investimento estratégico em
o crescimento futuro e o sucesso do nosso negócio, mas também um testemunho da nossa determinação inabalável
compromisso com a inovação, satisfação do cliente e excelência em tudo o que fazemos.
As we embark on this journey to bring our coffee shop into the digital age, we are excited
compartilhar nossa paixão por café excepcional e hospitalidade com um público global, um
clique de cada vez.

12
3.2 PESQUISA DO PROJETO

Objetivo
1. Aumentar a Visibilidade e Reconhecimento da Marca: O principal objetivo do café
o site da loja tem como objetivo aumentar a conscientização e o reconhecimento da marca. Ao estabelecer um
presença profissional online, o site tem como objetivo mostrar a identidade única,
valores e ofertas da cafeteria para um público mais amplo.
2. Fornecer Informações Abrangentes: O site deve servir como um centro central
de informações para os clientes, oferecendo detalhes sobre a localização da cafeteria,
horário de funcionamento, informações de contato e direções. Além disso, deve
fornecer informações sobre a história da cafeteria, a missão e o compromisso com
qualidade.
3. Exibir Produtos e Menu: Um objetivo principal é apresentar de forma visualmente atraente
e um menu abrangente de bebidas de café, pastelaria, petiscos e outros itens
disponível para compra. Cada item do menu deve ser acompanhada por atraente
descrições, imagens de alta qualidade e detalhes relevantes, como ingredientes, preços,
e informações dietéticas.
4. Facilitate Seamless Online Ordering: The website aims to streamline the ordering
processo para os clientes, oferecendo um sistema de pedidos online fácil de usar.
Os clientes devem ser capazes de navegar facilmente pelo menu, selecionar itens e personalizá-los.
pedidos e concluir transações de forma segura. Integração com gateways de pagamento
e sistemas de gestão de pedidos são essenciais para garantir operações suaves.
5. Habilitar Reservas Convenientes: Outro objetivo é proporcionar uma experiência sem complicações.
experiência de reserva para clientes que desejam fazer uma refeição no café.
o site deve apresentar um sistema de reservas que permita aos clientes verificar
disponibilidade, selecione datas e horários preferidos, especifique o tamanho da festa e confirme
reservas com facilidade. Confirmações e lembretes automatizados podem aprimorar
satisfação do cliente e reduzir faltas.
6. Promover Ofertas e Eventos Especiais: O site serve como uma plataforma para
promovendo ofertas especiais, descontos, promoções e eventos futuros realizados por
a cafeteria. Isso inclui promoções sazonais, programas de fidelidade, hora feliz
negócios, apresentações de música ao vivo, exposições de arte e outros eventos comunitários.
Imagens envolventes, redação convincente e chamadas à ação claras são fundamentais para
impulsionando a participação do cliente.

7. Envolva os clientes por meio de conteúdo atraente: Para cativar e reter visitantes,
o site deve apresentar conteúdo envolvente e informativo relacionado ao café
cultura, técnicas de cervejeira, receitas e tendências da indústria. Uma seção de blog pode servir
como uma plataforma para compartilhar artigos educacionais, entrevistas com especialistas em café,
historias dos bastidores e depoimentos de clientes. Conteúdo multimídia como
vídeos, podcasts e quizzes interativos podem enriquecer ainda mais a experiência do usuário.

13
 8. Integrar Canais de Mídia Social: Aproveitando o poder das mídias sociais, o
o site tem como objetivo ampliar seu alcance, fomentar o engajamento comunitário e amplificar
defesa da marca. Integração com plataformas de mídia social populares, como
Facebook, Instagram, Twitter e LinkedIn permitem que os clientes compartilhem facilmente
suas experiências, seguir atualizações e interagir com o conteúdo da cafeteria.
Os feeds de redes sociais, botões de compartilhamento e galerias de conteúdo gerado pelo usuário podem
aumentar a prova social e a viralidade.
9. Coletar e Utilizar o Feedback dos Clientes: O site oferece oportunidades para
clientes para compartilhar seu feedback, sugestões e avaliações. Formulários de feedback,
pesquisas, seções de comentários e plataformas de avaliação permitem que a cafeteria reúna
insights valiosos sobre as preferências dos clientes, níveis de satisfação e áreas para
melhoria. Analisar e agir com base no feedback dos clientes pode informar os negócios
decisões, aprimorar ofertas de produtos e fortalecer relacionamentos com os clientes.
10. Impulsionar Vendas e Crescimento da Receita: Em última análise, o objetivo principal do
O site da cafeteria tem como objetivo impulsionar as vendas e o crescimento da receita para o negócio. Por
atraindo novos clientes, aumentando a retenção de clientes, maximizando a média
valor do pedido e expansão de fontes de receita, o site contribui para o
sucesso financeiro e sustentabilidade da cafeteria. Acompanhamento de desempenho,
técnicas de monitoramento de analytics e otimização de conversão são empregadas para
medir a eficácia do site e refinar estratégias para continuidade
melhoria.

3.3 REQUISITOS DE HARDWARE

❖ Processador: Intel Pen um core i5
❖ Hard Disk : 4 GB
❖ RAM : 1 TB

3.4 REQUISITOS DE SOFTWARE

❖ Restrição de Design

• Sistema Operacional: Windows 10

• Front End : Microsoſt . net framwork with microsoſt visual
estúdio

14
3.5 DESIGN DO SISTEMA

15
3.6 SOURCE CODE :

HTML Content:

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

<cabeça>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="[Link]">
<link rel="stylesheet" href="[Link]
[Link]/ajax/libs/fontawesome/6.2.1/css/[Link] integridade="sha512-
MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1O
nMGCdVK+iQrJ7lzPJQd1w==
crossorigin="anônimo" referrerpolicy="sem-referente" />
<title>Blabla Coffee</title>
</cabeça>

<body>

<header>
<div class="logo">
<a href="#">Blabla <span>Café</span></a>
</div>

<nav>

16
 <ul>
<li><a href="#">Início</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#shop">Loja</a></li>
<li><a href="#contact">Contate-nos</a></li>
</ul>
</nav>
</cabeçalho>

<div class="content">
<h2>Café Blabla</h2>
<p>Você gostaria de começar o dia com um bom café?</p>
</div>

<div class="menu" id="menu">

<div class="menu-header">
<h3>Menu</h3>
<h4>Menu de Café Blabla</h4>
</div>
<div class="menu-content">
<div class="hot-coffees">
<div class="imagem-de-cafés-quentes">

<img src="img/[Link]" alt="">

</div>
<div class="hot-coffees-body">
<h2>Cafés Quentes</h2>
<label>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius,
repellat!
</div>
</div>
<div class="cold-coffees">
<div class="cold-coffees-image">
<img src="img/[Link]" alt="">

17
 </div>
<div class="cold-coffees-body">
<h2>Cold Coffees</h2>
<label>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius,
repelente!
</div>
</div>
<div class="frappucino-coffees">
<div class="frappucino-coffees-image">
<img src="img/[Link]" alt="">
</div>
<div class="frappucino-coffees-body">
<h2>Frappucino Coffees</h2>
<label>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius,
repelente!
</div>
</div>
</div>
</div>

<div class="loja" id="loja">

<div class="shop-header">
<h3>Loja</h3>
<h4>Drinks de Café Blabla</h4>
</div>
<div class="shop-box">
<div class="item-1"> </div>

<div class="card">
<div class="card-image">
<img src="img/[Link]">
</div>
<div class="card-body">
<i class="fa-solid fa-star"></i>

18
 <i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half"></i>
<label class="cash">4.45$</label>
<h3>Macchiato de Caramelo</h3>
<label>Lorem ipsum dolor sit amet.</label>
</div>
</div>
</div>
<div class="item-2">
<div class="card">
<div class="card-image">
<img src="img/ [Link]">
</div>
<div class="card-body">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<label class="cash">3.75$</label>
<h3>Flat White</h3>
<label>Lorem ipsum dolor sit amet.</label>
</div>
</div>
</div>
<div class="item-3">
<div class="card">
<div class="card-image">
<img src="img/[Link]">
</div>
<div class="card-body">

19
 <i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half"></i>
<label class="cash">3.95$</label> <h3>Chocolate</h3>
Frappuccino
<label>Lorem ipsum dolor sit amet.</label>
</div>
</div>
</div>
<div class="item-4">
<div class="card">
<div class="card-image">
<img src="img/[Link]">
</div>
<div class="card-body">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<label class="cash">2.79$</label>
<h3>Frappe</h3>
<label>Lorem ipsum dolor sit amet.</label>
</div>
</div>
</div>
<div class="item-5">
<div class="card">
<div class="card-image">
<img src="img/[Link]">
</div>

20
 <div class="card-body">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half"></i>
<label class="cash">3.45$</label> <h3>Cappuccino Mocha</h3>

<label>Lorem ipsum dolor sit amet.</label>

</div>
</div>
</div>
<div class="item-6">
<div class="card">
<div class="imagem-do-cartão">

<img src="img/[Link]">
</div>
<div class="card-body">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<label class="cash">3,25€</label>
<h3>Vanilla Frappucino</h3>
<label>Lorem ipsum dolor sit amet.</label>
</div>
</div>
</div>
<div class="item-7">
<div class="card">
<div class="card-image">
<img src="img/[Link]">
</div>

21
 <div class="card-body">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half"></i>
<label class="cash">6.60$</label> Chocolate Branco
Mocha</h3>
<label>Lorem ipsum dolor sit amet.</label>
</div>
</div>
</div>
<div class="item-8">
<div class="card">
<div class="card-image">
<img src="img/[Link]">
</div>
<div class="card-body">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<label class="cash">5,65€</label>
<h3>Latte de Gelo</h3>
<label>Lorem ipsum dolor sit amet.</label>
</div>
</div>
</div>
</div>
</div>

<div class="contact" id="contact">

22
 <div class="caixa-de-contato">
<div class="contact-image">
<img src="img/[Link]">
</div>
</div>
<div class="contact-box">
<div class="contact-body">
<form>
<h2>Entre em Contato</h2>

<div class="form-content">
<input type="text" required>
<span></span>
<label>Nome de usuário</label>
</div>
<div class="form-content">
<input type="email" required>
<span></span>
<label>Email</label>
</div>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>

<div class="footer">
<div class="footer-box">
<div class="social-media">
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>

23
 </div>
<div class="copyright">
<label>Copyright &copy; 2022</label>
</div>
<div class="marca">
<label>Blabla <span>Coffee</span></label>
</div>
</div>
</div>

</corpo>
</html>

CSS Content:

@import
url('[Link]
display=swap');

:root {
--main-color: #443;
--border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%;
--border-radius-hover: 4% 95% 6% 95% / 95% 4% 92% 5%;
--border: .2rem solid var(--main-color);
--border-hover: .2rem dashed var(--main-color);
}

*{
font-family: 'Poppins', sans-serif;
margin: 0; preenchimento: 0; caixa-
contorno: nenhum;
dimensionamento: border-box;
borda: nenhuma; decoração do texto:
nenhum; text-transform: capitalizar;
transição: tudo .2s linear;
}

html { tamanho-da-fonte: 62.5%;

sobre low-x: ocultar; rolar-

24
padding-top: 7rem; scroll-
behavior: smooth;
}

seção {
preenchimento: 2rem 9%;
}

.cabeçalho { tamanho da fonte: 9rem;

text-transform: uppercase;
cor: transparente;
-webkit-text-stroke: .05rem var(--main-color);
espaçamento-da-letra: .2rem; alinhamento-do-texto: centro;
pointer-events: nenhum; posição: relativa;
}

.heading span { posição: absoluta;

top: 50%; esquerda: 50%; transformar:
translate(-50%, -50%); largura:
100%; cor: var(--main-color);
tamanho da fonte: 3rem;
}

.btn { display: inline-block;

padding: .9rem 1.5rem; border: var(-
-borda); raio da borda: var(--borda-
radius); color: var(--main-color);
fundo: nenhum; cursor: ponteiro;
margem-topo: 1rem; tamanho da fonte: 1.7rem;
}

.btn:hover {
border-radius: var(--border-radius-hover); border:
var(--border-hover);
}

/* CABECALHO */

.header {
position: misturado;
top: 0; esquerda: 0;
right: 0; display:

25
lex; alinhar-itens:
centro; justificar
content: espaço-
entre z-
index: 1000;
background: #fff;
sombra-da-caixa: 0
.5rem 1rem rgba(0,
0, 0, .1);
preenchimento: 2rem 9%;
}

.header .logo { color:

var(--cor-principal); font-
tamanho: 2.3rem;
}

.header .logo i { padding-

esquerda: .5rem;
}

.header .navbar a {
margem: 0 1rem; fonte-
tamanho: 1.7rem; cor: var(-
-cor-principal);
}

.header .btn { margin-

top: 0;
}

#menu-btn {
tamanho da fonte: 3rem; color:
var(--main-color);
cursor: pointer; display:
nenhum;
}

/* INÍCIO */

.home { min-
height: 100vh;

26
padding-top: 12rem;
background:
url(../imagem/início-
[Link]) sem repetição;
background-position:
center;
tamanho-de-fundo:
cobertura
}

.casa .linha {
exibir: lex; alinhar
itens: centro; lex-
wrap: wrap; gap:
1,5rem;
}

.home .row .content {

lex: 1 1 42rem;
}

.home .row .image {

lex: 1 1 42rem;
padding-top: 10rem;
text-align: central;
}

.home .row .image img {

height: 35rem;
animação: carregar 4s linear no infinito;
}

@keyframes loat {

0%, 100% { transformar

translateY(0rem);
}

50% { transform:
translateY(-7rem);
}
}

27
.home .row .content h3 { fonte-
tamanho: 6.5rem; cor: var(--principal-
cor); transformação de texto:
MAIÚSCULAS;
}

.home .image-slider { text-

alinhamento: centro; preenchimento:
3rem 0;
}

.home .image-slider img {

height: 9rem; margin: 0
.5rem; cursor: pointer;
margem-topo: 5rem;
}

.home .image-slider img:hover {

transformar: translateY(-2rem);
}

/* SOBRE */

.sobre .row {
display: lex; alinhar
itens: centro; lex-
wrap: wrap; gap:
1.5rem;
}

.sobre .linha .imagem {

lex: 1 1 42rem;
}

.about .row .image img {

largura: 100%;
animação: sobreImagem 4s linear em inite;
}

@keyframes sobreImagem {

28
 0%
100% {
transformar: escalar(.9);
border-radius: var(--border-radius-hover);
}

50% { transformar: escalar(0.8);

border-radius: var(--border-radius);
}
}

.about .row .content {

lex: 1 1 42rem;
}

.sobre .linha .conteúdo .título {

cor: var(--main-color);
tamanho da fonte: 3rem; line-height:
1.8
}

.about .row .content p {

cor: var(--main-color);
tamanho da fonte: 1.5rem; linha-
height: 1.8; padding:
1rem 0;
}

.about .row .content .icons-container {

exibir: lex; lex-wrap: wrap; gap:
1rem; padding-top: 3rem;
}

.sobre .linha .conteúdo .container-de-ícones .ícones {

lex: 1 1 15rem; preenchimento: 1.5rem; texto-
alinhamento: centro; borda: var(--borda);
border-radius: var(--border-radius);
}

.sobre .linha .conteúdo .container-de-ícones .ícones img {

altura: 5rem;
}

29
.sobre .linha .conteúdo .container-de-ícones .ícones h3 {
tamanho-da-fonte: 1.7rem; padding-top: 1rem; color:
var(--main-color);
}

/* MENU */

.menu { background: url(../image/[Link]) no-

repetir; posição de fundo: centro; fundo-
size: cover;
}

.menu .box-container {
exibir: lex; lex-wrap:
embrulhar; gap: 2rem;
justificar-conteúdo: centro;
}

.menu .box-container .box { lex: 1 1

42rem; padding: 2rem; border: var(-
-borda); raio da borda: var(--borda-
raio); exibir: lex; align-items:
centro; gap: 1.5rem; margem-esquerda:
6rem;
}

.menu .box-container .box:hover { border:

var(--border-hover); raio-da-borda: var(--
border-radius-hover);
}

.menu .box-container .box img {

altura: 8rem; margem-
esquerda: -6rem;
}

.menu .box-container .box .content h3 {

tamanho da fonte: 2.2rem; cor: var(--principal-
cor); altura da linha: 1.8;
}

30
.menu .box-container .box .content p {
tamanho da fonte: 1.6rem; color: var(--main-
cor); altura da linha: 1.8; preenchimento:
1rem 0;
}

.menu .box-container .box .content span {

tamanho da fonte: 2rem; color: var(--main-
cor); altura da linha: 1.8;
}

/* REVISÃO */

.review .review-slider {
padding: 7rem 0;
}

.review .review-slider .box { border:

var(--borda); raio da borda: var(--
border-radius); alinhamento de texto: centro;
posição: relativa; z-index: 0;
preenchimento: 2rem;
}

.review .review-slider .box .fa-quote-left {

posição: absoluta; top: 2rem; left:
2.5rem;
tamanho da fonte: 6rem;
cor: #ccc; z-
index: -1;
}

.review .review-slider .box .fa-quote-right {

posição: absoluta; inferior: 2rem; direito:
2.5rem; font-size: 6rem; color: #ccc;
z-index: -1;
}

.review .review-slider .box:hover .fa-quote-left {

top: -6.5rem;
}

31
.review .review-slider .box:hover .fa-quote-right {
inferior: -6.5rem;
}

.avaliação .slider-de-avaliação .caixa img {

height: 7rem; width: 7rem;
raio-da-borda: 50%; margin-
inferior: .7rem;
}

.resenha .deslizamento-de-resenha .caixa .estrelas {

preenchimento: 0.5rem 0
}

.revisão .revisão-slider .caixa .estrelas i {

tamanho da fonte: 1.7rem; cor: var(--
cor-principal);
}

.review .review-slider .box p {

tamanho-da-fonte: 1.6rem; color:
var(--main-color); padding:
1rem 0; altura-da-linha: 1.8;
}

.avaliação .slider-de-avaliação .caixa h3 {

tamanho-da-fonte: 2.2rem; cor: var(-
-cor-principal); altura da linha:
1.8;
}

.avaliação .avaliação-slider .caixa span {

tamanho da fonte: 1.5rem; cor: var(--
cor-principal);
}

.swiper-pagination-bullet {
height: 1.5rem; width:
1.5rem; border-radius: 0;
}

32
.swiper-pagination-bullet-active {
fundo: var(--main-color);
}

/* LIVRO */

.book { background: url(../image/book-

[Link]); posição de fundo: centro;
tamanho-de-fundo: cobrir;
}

.livro forma { margens: 0 auto 2rem auto;

largura-máxima: 60rem; border-radius: var(--
border-radius-hover); padding: 3rem;
border: var(--border);
}

.book form .box {

width: 100%;
padding: 1rem 1.2rem;
border-radius: .5rem;
font-size: 1.6rem;
background: nenhum
text-transform: nenhum;
cor: var(--principal-
cor); borda: var(-
-borda); margem:
.7rem 0;
}

.book form .box:focus {

border: var(--border-hover);
}

.book form textarea {

height: 15rem; resize:
nenhum
}

.footer .box-container { display: grid; grid-template-columns:

repetir(auto- it, minmax(23rem, 1fr)); gap: 1.5rem;
}

33
 </div>
<div class="copyright">
<label>Copyright &copy; 2022</label>
</div>
<div class="marca">
<label>Blabla <span>Coffee</span></label>
</div>
</div>
</div>

</corpo>
</html>

CSS Content:

@import
url('[Link]
display=swap');

:root {
--main-color: #443;
--border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%;
--border-radius-hover: 4% 95% 6% 95% / 95% 4% 92% 5%;
--border: .2rem solid var(--main-color);
--border-hover: .2rem dashed var(--main-color);
}

*{
font-family: 'Poppins', sans-serif;
margin: 0; preenchimento: 0; caixa-
contorno: nenhum;
dimensionamento: border-box;
borda: nenhuma; decoração do texto:
nenhum; text-transform: capitalizar;
transição: tudo .2s linear;
}

html { tamanho-da-fonte: 62.5%;

sobre low-x: ocultar; rolar-

24
 }

seção {
padding: 2rem;
}
}

@media (max-width: 768px) {

.cabeçalho {
font-size: 6rem;
}

.cabeçalho span {
font-size: 2.3rem;
}

#menu-btn {
exibir: inicial;
}

#[Link]-times {
transformar: rotacionar(180deg);
}

.header .navbar { posição: absoluta;

top: 99%; esquerda: 0; right: 0;
background: #fff; clip-path: polígono(0 0,
100% 0, 100% 0, 0 0);
}

.header .[Link] {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.header .navbar a {
exibir: bloco; font-
size: 2.2rem; margin:
0; preenchimento: 1.5rem
2rem;
}

35
 .home { text-
align: center;
}

.home .row .content h3 { font-

tamanho: 4rem;
}

.menu .box-container .box {

margem-esquerda: 0; margem-superior:
6rem; lex- low: column;
alinhamento de texto: centralizado;

.menu .box-container .box img {

margem-esquerda: 0; margin-top: -
6rem;
}
}

@media (max-width: 450px) {

html { font-
size: 50%;
}

.home .row .image img {

height: auto; width:
100%;
}
}

JAVASCRIPT:

let menu = [Link]('#menu-btn'); let

navbar = [Link]('.navbar');

[Link] = () => { [Link]('fa-

times'); [Link]('active');
};

36
[Link] = () => { [Link]('fa-
times'); [Link]('active');
};

[Link]('.image-slider img').forEach(imagens => {

[Link] = () => { var src = [Link]('src');
[Link]('.main-home-image').src = src;
};
});

var swiper = new Swiper(".review-slider", {

spaceBetween: 20,
pagination: { ele:
".swiper-pagination",
clickable: true,
},
loop: true, grabCursor: true,
autoplay: { delay: 7500,
disableOnInteraction: false,
},
breakpoints: {
0: {
slidesPerView: 1
}, 768: {
slidesPerView: 2
}
},
});

37
 3.7 RESULT

FIG 3.7.1 TELA INICIAL

38
39
 CONCLUSÃO

Concluir um site de cafeteria de forma eficaz envolve resumir os pontos principais

pontos, incentivando a ação e deixando uma impressão duradoura. Aqui está um exemplo
conclusion for a coffee shop website:

Thank you for joining us on this journey through the aromatic world of coffee.
No [Coffee Haven], nos esforçamos para criar mais do que apenas um lugar para desfrutar do seu
cerveja favorita – estamos criando uma experiência. Se você está em busca de um ambiente acolhedor
lugar para relaxar, colocar a conversa em dia com amigos ou simplesmente se entregar ao seu dia a dia
conserto de cafeína, estamos aqui para elevar o seu ritual de café.

Explore nosso menu para descobrir nossas bebidas artesanais, doces artesanais,
e guloseimas deliciosas. Não se esqueça de conferir nossos eventos futuros e
promoções para ficar conectado com o pulso da nossa comunidade.
Junte-se a nós em nossa missão de celebrar a arte do café e a alegria do compartilhamento.
momentos. Siga-nos nas redes sociais, inscreva-se em nosso boletim informativo ou passe por aqui
nossa loja para experimentar o calor e o aroma em primeira mão.
De nossos grãos à sua xícara, cada gole é um testemunho da nossa paixão pela qualidade
e hospitalidade. Obrigado por escolher [Coffee Haven] como seu café
destino.
Saboreie o momento. Beba, relaxe e desfrute.
Atenciosamente, [Sua Equipe Coffee Haven]

40
 Referências:

Sites

• h ps://[Link]/Sj5NX_br5WY?si=e__6ynEVKHxHya3y
• h ps://[Link]/wiki/caféshop
• h ps://[Link]/2023/11/27/cafeteria-
site-usando-html-css/
• h ps://[Link]/crea ng-a-coffee site-de-loja
usando-html-e-css/

41