carlosheds/amazinggraph

Credits

CLICK

Amazing Graph

Landing page to create amazing graphics

Challenge · Contact

Welcome :)

DevChallenge allow you to improve your skills!

Challenge

Your challenge is to build a landing page about a website that create graphics.

Seu desafio é criar uma página sobre um site de criação de gráficos.

Techs:

HTML
CSS

Getting start:

1 - Use this template or download this repository with the starter code
2 - Read the instructions in readme.md
3 - Start coding!
4 - Share your results with the community :)

1 - Use esse template ou baixe esse repositório com o código inicial
2 - Leia as instruções no readme.md
3 - Comece a codar!
4 - Compartilhe seu resultado com a comunidade :)

Requirements:

• Your page should get it looking as close to the design as possible
  
• Your page should be responsive
  

• Sua página deve se parecer o mais próximo possível do design
  
• Sua página deve ser responsiva
  

Feel free to use any workflow you are comfortable with :)

Colors:

Orange: #D2872C
Gray: #766F68

Design:

Design available in ./design path
Images available in ./assets path

Modelo disponível na pasta ./design
Imagens disponíveis na pasta ./assets

Font family:

• Roboto

Share!

Initialize your project with this template in your github as a public repository
Capture a screenshot, gif or video and share your result in Linkedin
Send me a feedback in Linkedin!

Designed and created by Lorena :)

Result

Choices

Mobile

Comecei por aqui (mobile first). Foi a parte menos complicada, apenas apliquei um display:flex; juntamente com flex-direction:column; na classe .container que continha as tags <header>, <section> do site.

Coloquei a imagem numa <img> dentro da <section>. O botão do menu adicionei criando 4 <div> sem conteúdo no html e tirei o display da <nav> via CSS. Adicionei uma funcionalidade simples que aprendi essa semana com Javascript, onde ao clicar no botão do menu,faz aparecer uma <div> com o conteúdo da <nav> dentro.

Responsive

Primeiramente tentei fazer com display:grid;,porém sem sucesso pois não consegui deixar parecido com o exercício proposto (com o título ficando por cima da imagem).Removi o display da tag de <img> e coloquei a imagem via CSS como imagem de fundo background-image:;.

Criei um @media(min-width:769px) e outro @media (min-width:770px) and (max-width:1400px) pois achei que o texto deveria se adaptar melhor a imagem de fundo sem que atrapalhe a legibilidade.