/spaceCream

Challange 04 | Explorer Program at Rocketseat

Primary LanguageCSS

space-cream

Desafio 04 do Explorer da Rocketseat, que teve como objetivo criar uma página de sorvetes chamada Space Cream, para praticar a utilização de layouts responsivos levando em consideração o conceito Mobile First. Nesse projeto, foram utilizados: regra Mobile First; unidades de medidas flexíveis; variáveis no CSS; animações e transições com CSS; CSS Grid Layout; Media Queries. Na animação implementada, ao carregar a tela as imagens sobem enquanto os tipos de sorvete descem. As principais diferenças entre as versões Desktop e Mobile são que a versão Desktop apresenta imagens duplicadas e um rodapé que não estão disponíveis na versão Mobile, enquanto não apresenta os tipos de sorvetes acima das imagens.

================================

Rocketseat Explorer Challenge 04, which aimed to create an ice cream page called Space Cream, to practice using responsive layouts taking into account the Mobile First concept. In this project, the following were used: Mobile First rule; flexible measurement units; variables in CSS; animations and transitions with CSS; CSS Grid Layout; Media Queries. In the implemented animation, when loading the screen, the images go up while the types of ice cream go down. The main differences between the Desktop and Mobile versions are that the Desktop version features duplicate images and a footer which are not available in the Mobile version, while it does not display the ice cream types above the images.

image