Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gsantos99/coffee-shop
Site de cafeteria totalmente responsivo. Feito com HTML, CSS e JAVASCRIPT.
https://github.com/gsantos99/coffee-shop
css html javascript webkit
Last synced: 1 day ago
JSON representation
Site de cafeteria totalmente responsivo. Feito com HTML, CSS e JAVASCRIPT.
- Host: GitHub
- URL: https://github.com/gsantos99/coffee-shop
- Owner: Gsantos99
- License: mit
- Created: 2022-07-19T03:20:20.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-08-10T01:45:52.000Z (over 2 years ago)
- Last Synced: 2023-03-08T21:57:21.313Z (over 1 year ago)
- Topics: css, html, javascript, webkit
- Language: HTML
- Homepage: https://caferecife.netlify.app/
- Size: 1.48 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Coffee-Shop
##
:computer: Sobre o projeto
Site de uma cafeteria com várias seções informativas, ideal para tornar o negócio mais presente no mundo digital. Totalmente responsivo, ou seja, o conteúdo da página se adapta ao tamanho da tela do dispositivo, tal característica é fundamental para as web páginas, pois atualmente grande parte das pessoas consumem conteúdos online por smartphones ou tablets.
Sobre •
Funcionalidades •
Responsividade •
Tecnologias •
Autor
:hammer: Funcionalidades
## Conversão
A ideia do projeto é trazer mais clientes para a cafeteria por meio de um site responsivo, no qual o visitante pode escolher produtos e comprar por meio da internet. Além da receita do ponto físico, o negócio teria a receita advinda dos pedidos da página web.
💻 :iphone: Responsividade
## Unidades relativas no CSS
O CSS (Cascading Style Sheets) é uma linguagem de folha de estilo, sendo ela utilizada para descrever como os elementos HTML serão apresentados. Para que uma página seja responsiva seus elementos deverão ser adaptados a diferentes tamanhos de tela. Logo as unidades de medida dos elementos devem ser relativas. No CSS existem unidades relativas que são calculadas tendo como base outra unidade de medida definida. Nesse projeto utilizei a unidade de medida rem (“root em”), fazendo referência às medidas do root. Normalmente os browsers especificam o tamanho default da fonte do elemento root (raiz) como 16px, sabendo disso deixei o font-size igual a 62,5% de 16px (10px), facilitando assim a definição de valores. Exemplo: 1.2rem é igual a 1.2 * 10px = 12px.
## Medias Queries
As Medias Queries quando adicionadas ao CSS deixam a apresentação do conteúdo adaptado a uma gama específica de dispositivos. Nesse projeto utilizei três tamanhos para utilizar de referência: 991px (para computadores), 768px (para tablets) e 450px (para smartphones). Além disso, fiz uma versão da barra de menu para telas menores.
## JavaScript
Para ativação dos botões de navegação em smartphones utilizei o javaScript.
A Document Object Model (DOM) é uma interface de programação para documentos HTML e XML. Por meio dela o JavaScript pode alterar o estilo e o conteúdo da página HTML. Utilizei essa funcionalidade para substituir a barra de menu de telas maiores (desktop) por um menu lateral, exibido em smartphones, por meio de uma propriedade que adiciona ou retira classes (CSS) de elementos HTML: Element.classList.
:globe_with_meridians: Tecnologias
Para fazer o projeto utilizei as seguintes tecnologias:
Autor :smiley:
Giulyano Santos :rocket:
Feito com carinho por Giulyano Santos :wave: entre em contato: Linkedin