![Bannière graphique de presentation du projet Atom](https://gabrielwoll.fr/wp-content/uploads/2020/12/Banniere-Atom-V2.jpg)
Créer une maquette et intégrer un site internet responsive en HTML5/CSS3
Atom Production est une société de production fictive proposant la réalisation de court-métrages, films institutionnels ou encore de couvrir des événements sportifs. Elle souhaitait faire appelle à mes services pour réaliser son site en version responsive.
– Le site devait comporter 5 pages :
Accueil / Infos / Tarifs / Galerie / Contact
– L’univers graphique devait de tourner autour de la vidéo et faire moderne.
– Les couleurs majoritaires étaient le noir, le blanc, le rouge.
– Le logo était fourni ainsi que des visuels.
– Réaliser la maquette sur Photoshop ou Illustrator.
– Les points de ruptures étaient à 1200/992/768 et 576px.
![mockup ecran vertical pc](https://gabrielwoll.fr/wp-content/uploads/2020/10/Atom-Monitor-Pro-Display-XDR-Mockup.png)
J’ai débuté en réalisant, pour l’entête du site, un simple montage vidéo mettant en avant les domaines d’intervention de la société.
Pour pouvoir réaliser ce premier site en HTML/CSS, j’ai préféré rester sur un design simple tout en respectant le brief qui nous avait été remis. J’ai ensuite pu concevoir le site en version responsive design à l’aide des média-queries.
![Version desktop de la page d'accueil du site Maquette pour interface pc de la page d'accueil Atom Production](https://gabrielwoll.fr/wp-content/uploads/cache/2020/10/Atom-ACCEUIL/2823712710.jpg)
![Version desktop de la page infos du site Maquette pour interface pc de la page infos Atom Production](https://gabrielwoll.fr/wp-content/uploads/cache/2020/10/Atom-INFOS/328675863.jpg)
![Version desktop de la page tarifs du site Maquette pour interface pc de la page tarifs Atom Production](https://gabrielwoll.fr/wp-content/uploads/cache/2020/10/Atom-TARIFS/3192707171.jpg)
![Version desktop de la page galerie du site Maquette Tablette de la page galerie du site Atom Production](https://gabrielwoll.fr/wp-content/uploads/cache/2020/10/Atom-Galerie/2274337435.jpg)
![Version desktop de la page contact du site Maquette pour interface pc de la page contacts Atom Production](https://gabrielwoll.fr/wp-content/uploads/cache/2020/10/Atom-Contact/1071242534.jpg)
![Version tablette de la page d'accueil du site Maquette pour interface tablette de la page d'accueil Atom Production](https://gabrielwoll.fr/wp-content/uploads/cache/2020/10/Atom-Tablette-Accueil/133947987.jpg)
![Version tablette de la page infos du site Maquette pour interface tablette de la page infos Atom Production](https://gabrielwoll.fr/wp-content/uploads/cache/2020/10/Atom-Tablette-infos/4194620081.jpg)
![Version tablette de la page tarifs du site Maquette pour interface tablette de la page tarif Atom Production](https://gabrielwoll.fr/wp-content/uploads/cache/2020/10/Atom-Tablette-Tarifs/18874981.jpg)
![Version tablette de la page contact du site Maquette Tablette de la page contact Atom Production](https://gabrielwoll.fr/wp-content/uploads/cache/2020/10/Projet-Atom-Tablette-Contact/1607005654.jpg)
![Version tablette de la page galerie du site Maquette Tablette de la page galerie Atom Production](https://gabrielwoll.fr/wp-content/uploads/cache/2020/10/Projet-Atom-Tablette-Galerie/3347049493.jpg)
![Version mobile de la page accueil du site Maquette pour mobile de la page accueil du projet Atom Production](https://gabrielwoll.fr/wp-content/uploads/cache/2020/10/Atom-Mobil-Accueil/2500089911.jpg)
![Version mobile de la page contact du site Maquette pour mobile de la page contact du projet Atom Production](https://gabrielwoll.fr/wp-content/uploads/cache/2020/10/Atom-Mobil-Contact/1756683045.jpg)
![Version mobile de la page galerie du site Maquette pour mobile de la page galerie du projet Atom Production](https://gabrielwoll.fr/wp-content/uploads/cache/2020/10/Atom-Mobil-Galerie/84425387.jpg)