Merge branch 'css' into main

.gitignore

-## Ignore Visual Studio temporary files, build results, and
-## files generated by popular Visual Studio add-ons.
-##
-## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
-
-# User-specific files
-*.rsuser
-*.suo
-*.user
-*.userosscache
-*.sln.docstates
-
-# User-specific files (MonoDevelop/Xamarin Studio)
-*.userprefs
-
-# Build results
-[Dd]ebug/
-[Dd]ebugPublic/
-[Rr]elease/
-[Rr]eleases/
-x64/
-x86/
-bld/
-[Bb]in/
-[Oo]bj/
-[Ll]og/
-
-# Visual Studio 2015/2017 cache/options directory
-.vs/
-# Uncomment if you have tasks that create the project's static files in wwwroot
-#wwwroot/
-
-# Visual Studio 2017 auto generated files
-Generated\ Files/
-
-# MSTest test Results
-[Tt]est[Rr]esult*/
-[Bb]uild[Ll]og.*
-
-# NUNIT
-*.VisualState.xml
-TestResult.xml
-
-# Build Results of an ATL Project
-[Dd]ebugPS/
-[Rr]eleasePS/
-dlldata.c
-
-# Benchmark Results
-BenchmarkDotNet.Artifacts/
-
-# .NET Core
-project.lock.json
-project.fragment.lock.json
-artifacts/
-
-# StyleCop
-StyleCopReport.xml
-
-# Files built by Visual Studio
-*_i.c
-*_p.c
-*_h.h
-*.ilk
-*.meta
-*.obj
-*.iobj
-*.pch
-*.pdb
-*.ipdb
-*.pgc
-*.pgd
-*.rsp
-*.sbr
-*.tlb
-*.tli
-*.tlh
-*.tmp
-*.tmp_proj
-*_wpftmp.csproj
-*.log
-*.vspscc
-*.vssscc
-.builds
-*.pidb
-*.svclog
-*.scc
-
-# Chutzpah Test files
-_Chutzpah*
-
-# Visual C++ cache files
-ipch/
-*.aps
-*.ncb
-*.opendb
-*.opensdf
-*.sdf
-*.cachefile
-*.VC.db
-*.VC.VC.opendb
-
-# Visual Studio profiler
-*.psess
-*.vsp
-*.vspx
-*.sap
-
-# Visual Studio Trace Files
-*.e2e
-
-# TFS 2012 Local Workspace
-$tf/
-
-# Guidance Automation Toolkit
-*.gpState
-
-# ReSharper is a .NET coding add-in
-_ReSharper*/
-*.[Rr]e[Ss]harper
-*.DotSettings.user
-
-# JustCode is a .NET coding add-in
-.JustCode
-
-# TeamCity is a build add-in
-_TeamCity*
-
-# DotCover is a Code Coverage Tool
-*.dotCover
-
-# AxoCover is a Code Coverage Tool
-.axoCover/*
-!.axoCover/settings.json
-
-# Visual Studio code coverage results
-*.coverage
-*.coveragexml
-
-# NCrunch
-_NCrunch_*
-.*crunch*.local.xml
-nCrunchTemp_*
-
-# MightyMoose
-*.mm.*
-AutoTest.Net/
-
-# Web workbench (sass)
-.sass-cache/
-
-# Installshield output folder
-[Ee]xpress/
-
-# DocProject is a documentation generator add-in
-DocProject/buildhelp/
-DocProject/Help/*.HxT
-DocProject/Help/*.HxC
-DocProject/Help/*.hhc
-DocProject/Help/*.hhk
-DocProject/Help/*.hhp
-DocProject/Help/Html2
-DocProject/Help/html
-
-# Click-Once directory
-publish/
-
-# Publish Web Output
-*.[Pp]ublish.xml
-*.azurePubxml
-# Note: Comment the next line if you want to checkin your web deploy settings,
-# but database connection strings (with potential passwords) will be unencrypted
-*.pubxml
-*.publishproj
-
-# Microsoft Azure Web App publish settings. Comment the next line if you want to
-# checkin your Azure Web App publish settings, but sensitive information contained
-# in these scripts will be unencrypted
-PublishScripts/
-
-# NuGet Packages
-*.nupkg
-# The packages folder can be ignored because of Package Restore
-**/[Pp]ackages/*
-# except build/, which is used as an MSBuild target.
-!**/[Pp]ackages/build/
-# Uncomment if necessary however generally it will be regenerated when needed
-#!**/[Pp]ackages/repositories.config
-# NuGet v3's project.json files produces more ignorable files
-*.nuget.props
-*.nuget.targets
-
-# Microsoft Azure Build Output
-csx/
-*.build.csdef
-
-# Microsoft Azure Emulator
-ecf/
-rcf/
-
-# Windows Store app package directories and files
-AppPackages/
-BundleArtifacts/
-Package.StoreAssociation.xml
-_pkginfo.txt
-*.appx
-
-# Visual Studio cache files
-# files ending in .cache can be ignored
-*.[Cc]ache
-# but keep track of directories ending in .cache
-!*.[Cc]ache/
-
-# Others
-ClientBin/
-~$*
-*~
-*.dbmdl
-*.dbproj.schemaview
-*.jfm
-*.pfx
-*.publishsettings
-orleans.codegen.cs
-
-# Including strong name files can present a security risk
-# (https://github.com/github/gitignore/pull/2483#issue-259490424)
-#*.snk
-
-# Since there are multiple workflows, uncomment next line to ignore bower_components
-# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
-#bower_components/
-
-# RIA/Silverlight projects
-Generated_Code/
-
-# Backup & report files from converting an old project file
-# to a newer Visual Studio version. Backup files are not needed,
-# because we have git ;-)
-_UpgradeReport_Files/
-Backup*/
-UpgradeLog*.XML
-UpgradeLog*.htm
-ServiceFabricBackup/
-*.rptproj.bak
-
-# SQL Server files
-*.mdf
-*.ldf
-*.ndf
-
-# Business Intelligence projects
-*.rdl.data
-*.bim.layout
-*.bim_*.settings
-*.rptproj.rsuser
-
-# Microsoft Fakes
-FakesAssemblies/
-
-# GhostDoc plugin setting file
-*.GhostDoc.xml
-
-# Node.js Tools for Visual Studio
-.ntvs_analysis.dat
-node_modules/
-
-# Visual Studio 6 build log
-*.plg
-
-# Visual Studio 6 workspace options file
-*.opt
-
-# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
-*.vbw
-
-# Visual Studio LightSwitch build output
-**/*.HTMLClient/GeneratedArtifacts
-**/*.DesktopClient/GeneratedArtifacts
-**/*.DesktopClient/ModelManifest.xml
-**/*.Server/GeneratedArtifacts
-**/*.Server/ModelManifest.xml
-_Pvt_Extensions
-
-# Paket dependency manager
-.paket/paket.exe
-paket-files/
-
-# FAKE - F# Make
-.fake/
-
-# JetBrains Rider
-.idea/
-*.sln.iml
-
-# CodeRush personal settings
-.cr/personal
-
-# Python Tools for Visual Studio (PTVS)
-__pycache__/
-*.pyc
-
-# Cake - Uncomment if you are using it
-# tools/**
-# !tools/packages.config
-
-# Tabs Studio
-*.tss
-
-# Telerik's JustMock configuration file
-*.jmconfig
-
-# BizTalk build output
-*.btp.cs
-*.btm.cs
-*.odx.cs
-*.xsd.cs
-
-# OpenCover UI analysis results
-OpenCover/
-
-# Azure Stream Analytics local run output
-ASALocalRun/
-
-# MSBuild Binary and Structured Log
-*.binlog
-
-# NVidia Nsight GPU debugger configuration file
-*.nvuser
-
-# Doctrine
-vendor/
-
-# MFractors (Xamarin productivity tool) working folder
-.mfractor/
-
-# Local History for Visual Studio
-.localhistory/
-
-# phplint
-phplint.cache
\ No newline at end of file

.gitlab-ci.yml

-# This file is a template, and might need editing before it works on your project.
-# To contribute improvements to CI/CD templates, please follow the Development guide at:
-# https://docs.gitlab.com/ee/development/cicd/templates.html
-# This specific template is located at:
-# https://gitlab.com/gitlab-org/gitlab/-/blob/master/lib/gitlab/ci/templates/PHP.gitlab-ci.yml
-
-# Select image from https://hub.docker.com/_/php/
-image: php:latest
-
-# Select what we should cache between builds
-cache:
-  paths:
-    - vendor/
-
-before_script:
-  - apt-get update -yqq
-  - apt-get install -yqq git libpq-dev libcurl4-gnutls-dev libicu-dev libvpx-dev libjpeg-dev libpng-dev libxpm-dev zlib1g-dev libfreetype6-dev libxml2-dev libexpat1-dev libbz2-dev libgmp3-dev libldap2-dev unixodbc-dev libsqlite3-dev libaspell-dev libsnmp-dev libpcre3-dev libtidy-dev libonig-dev libzip-dev
-  # Install PHP extensions
-  - docker-php-ext-install mbstring pdo_pgsql curl intl gd xml zip bz2 opcache
-  # Install & enable Xdebug for code coverage reports
-  - pecl install xdebug
-  - docker-php-ext-enable xdebug
-  # Install and run Composer
-  - curl -sS https://getcomposer.org/installer | php
-  - php composer.phar install
-
-# Bring in any services we need http://docs.gitlab.com/ee/ci/docker/using_docker_images.html#what-is-a-service
-# See http://docs.gitlab.com/ee/ci/services/README.html for examples.
-services:
-  - mysql:5.7
-
-# Set any variables we need
-variables:
-  # Configure mysql environment variables (https://hub.docker.com/r/_/mysql/)
-  MYSQL_DATABASE: lehangarlocal
-  MYSQL_ROOT_PASSWORD: ''
-
-# Run our tests
-# If Xdebug was installed you can generate a coverage report and see code coverage metrics.
-lint:
-    script:
-        ./vendor/bin/phplint

.phplint.yml

-path: ./
-jobs: 10
-cache: build/phplint.cache
-extensions:
-  - php
-exclude:
-  - vendor
-warning: false

.stylelintrc.json

+{
+    "extends": [
+        "stylelint-config-standard",
+        "stylelint-config-standard-scss"
+    ],
+    "rules": {
+        "selector-class-pattern": null,
+        "selector-id-pattern": null
+    }
+}
\ No newline at end of file

README.md

-# leHangar.local - Atelier du 02/11/2021 au 06/11/2021
-
-## Documents fournis
-- [Présentation du sujet](https://arche.univ-lorraine.fr/pluginfile.php/2676892/mod_resource/content/0/prez-cc.pdf "Présentation du sujet sous forme de slides hébergé sur Arches")
-- [Cahier des charges](https://arche.univ-lorraine.fr/pluginfile.php/2676864/mod_resource/content/0/atelier-1-2021-CC.pdf "Cachier des charges sous forme PDF hébergé sur Arches")
-- [Critères d'évaluation](https://arche.univ-lorraine.fr/pluginfile.php/2668108/mod_resource/content/0/atelier-1-2021-criteres.pdf "Critères d'évaluation sous forme PDF hébergé sur Arches")
-
-## Contributions
-- Hugo Bernard `bernar323u`
-    *   Modèles de donnée (UML)
-    *   Modèles de Base de Donnée (PHP)
-- Tritan Blot `blot32u`
-    *   Diagramme d'utilisation (UML)
-    *   Maquette Web (Schema)
-- Bastien Hohler `hohler3u`
-    *   Diagramme d'utilisation (UML)
-    *   Modèles de Base de Donnée (PHP)
-- Geoffrey Porayko `porayko1u`
-    *   Diagramme d'utilisation (UML)
-    *   Maquette Web (Schema)

bootstrap.php

-<?php
-declare(strict_types=1);
-
-use DI\ContainerBuilder;
-use Monolog\Handler\StreamHandler;
-use Monolog\Logger;
-use Monolog\Processor\UidProcessor;
-use Psr\Container\ContainerInterface;
-use Psr\Log\LoggerInterface;
-
-use Doctrine\Common\Annotations\AnnotationReader;
-use Doctrine\Common\Cache\FileSystemCache;
-use Doctrine\ORM\EntityManager;
-use Doctrine\ORM\Mapping\Driver\AnnotationDriver;
-use Doctrine\ORM\Tools\Setup;
-
-return function (ContainerBuilder $containerBuilder) {
-    $containerBuilder->addDefinitions([
-        EntityManager::class => function (ContainerInterface $container): EntityManager {
-            $settings = $container->get('settings');
-
-            $config = Setup::createAnnotationMetadataConfiguration(
-                $settings['doctrine']['metadata_dirs'],
-                $settings['doctrine']['dev_mode']
-            );
-
-            $config->setMetadataDriverImpl(
-                new AnnotationDriver(
-                    new AnnotationReader,
-                    $settings['doctrine']['metadata_dirs']
-                )
-            );
-
-           /* $config->setMetadataCacheImpl(
-                new FileSystemCache(
-                  $settings['doctrine']['cache_dir']
-                )
-            );*/
-
-            return EntityManager::create(
-                $settings['doctrine']['connection'],
-                $config
-            );
-        }
-    ]);
-};

cli-config.php

-<?php
-
-// cli-config.php
-
-use Doctrine\ORM\EntityManager;
-use Doctrine\ORM\Tools\Console\ConsoleRunner;
-
-use Doctrine\ORM\Tools\Setup;
-use Doctrine\ORM\Tools\Console\Command\SchemaTool;
-use Doctrine\ORM\Tools\Console\Command\SchemaTool\CreateCommand;
-use DI\ContainerBuilder;
-
-require __DIR__ . '/vendor/autoload.php';
-
-// Instantiate PHP-DI ContainerBuilder
-$containerBuilder = new ContainerBuilder();
-
-if (false) { // Should be set to true in production
-	$containerBuilder->enableCompilation(__DIR__ . '/var/cache');
-}
-
-// Set up settings
-$settings = require __DIR__ . '/settings.php';
-$settings($containerBuilder);
-
-// Set up dependencies
-$dependencies = require __DIR__ . '/bootstrap.php';
-$dependencies($containerBuilder);
-
-// Build PHP-DI Container instance
-$container = $containerBuilder->build();
-
-return ConsoleRunner::createHelperSet($container->get(EntityManager::class));

composer.json

-{
-    "require": {
-        "doctrine/orm": "^2.10",
-        "twig/twig": "^3.0",
-        "slim/slim": "4.*",
-        "slim/twig-view": "^3.0",
-        "doctrine/dbal": "^3.1",
-        "php-di/slim-bridge": "^3.2",
-        "symfony/cache": "^5.3",
-        "slim/psr7": "^1.5"
-    },
-    "autoload": {
-        "psr-0": {"": "src/"},
-        "psr-4": {"App\\":"src/"}
-    },
-    "require-dev": {
-        "overtrue/phplint": "^3.0"
-    }
-}

css/frmwrk.css

+.mb-1 {
+  margin-bottom: 5px;
+}
+
+.mt-1 {
+  margin-top: 5px;
+}
+
+.ml-1 {
+  margin-left: 5px;
+}
+
+.mr-1 {
+  margin-right: 5px;
+}
+
+.mb-2 {
+  margin-bottom: 10px;
+}
+
+.mt-2 {
+  margin-top: 10px;
+}
+
+.ml-2 {
+  margin-left: 10px;
+}
+
+.mr-2 {
+  margin-right: 10px;
+}
+
+.mb-3 {
+  margin-bottom: 15px;
+}
+
+.mt-3 {
+  margin-top: 15px;
+}
+
+.ml-3 {
+  margin-left: 15px;
+}
+
+.mr-3 {
+  margin-right: 15px;
+}
+
+.mb-4 {
+  margin-bottom: 20px;
+}
+
+.mt-4 {
+  margin-top: 20px;
+}
+
+.ml-4 {
+  margin-left: 20px;
+}
+
+.mr-4 {
+  margin-right: 20px;
+}

css/frmwrk.css.map

+{"version":3,"sourceRoot":"","sources":["../sass/sass.scss"],"names":[],"mappings":"AACI;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAVJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAVJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAVJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI","file":"frmwrk.css"}
\ No newline at end of file

css/style.css

+/* ===== GOOGLE FONTS ===== */
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");
+
+/* ===== VARIABLES CSS ===== */
+:root {
+  /* ===== Colores ===== */
+  --first-color: #1a73e8;
+  --input-color: #80868b;
+  --border-color: #dadce0;
+
+  /* ===== Fuente y tipografia ===== */
+  --body-font: "Roboto", sans-serif;
+  --normal-font-size: 1rem;
+  --small-font-size: 0.75rem;
+}
+
+/* ===== BASE ===== */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+/*****************
+1. global setup
+2. nav bar
+3. Banner
+4. media query for 768 breakpoint (tablet and mobile)
+*****************/
+
+/* ~~~~~~~~~~~~~~ Global setup starts ~~~~~~ */
+* {
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+  list-style: none;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Montserrat, sans-serif;
+  overflow-x: hidden;
+  background: radial-gradient(white, rgb(184	184	184 / 70%));
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  appearance: textfield;
+}
+
+/* ~~~~~~~~~~ Global setup ends ~~~~~~~~~~~~ */
+
+/* ~~~~~~~~~~~~~~~~~~~~~~ Nav Bar starts ~~~~~~~~~~~~~~~~~~~~~~ */
+nav {
+  background:
+    linear-gradient(
+      93deg,
+      rgb(37	105	75 / 100%) 16%,
+      rgb(77	192	142 / 100%) 55%
+    );
+  height: 60px;
+  max-width: 100%;
+}
+
+label.logo {
+  float: left;
+  color: cornsilk;
+  font-size: 30px;
+  font-weight: bold;
+  line-height: 60px;
+  margin-left: 40px;
+  margin-right: 20px;
+}
+
+nav ul {
+  float: right;
+  margin-right: 50px;
+}
+
+nav ul li {
+  display: inline-block;
+  line-height: 60px;
+  margin: 0 20px;
+  color: white;
+  font-size: 16px;
+}
+
+nav ul li a {
+  color: white;
+  font-size: 16px;
+  font-weight: bolder;
+}
+
+.container {
+  margin-top: 1%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 320px);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(320px, auto);
+  justify-content: center;
+  background-color: rgb(0 0 0 / 0%);
+}
+
+.container-detail {
+  margin-top: 1%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(auto, 768px));
+  grid-gap: 30px;
+  grid-auto-rows: minmax(auto, auto);
+  justify-content: center;
+  background-color: rgb(0 0 0 / 0%);
+}
+
+.span {
+  background-color: white;
+  padding: 0.5px;
+  box-shadow: 3px 2px 3px 1px rgb(0 0 0 / 40%);
+  text-align: center;
+  position: relative;
+  border-radius: 10px;
+  max-height: 320px;
+}
+
+h1 {
+  text-align: center;
+  font-family: cursive;
+}
+
+.span-detail {
+  background-color: inherit;
+  padding: 0.5px;
+  text-align: center;
+  position: relative;
+  border-radius: 10px;
+  max-height: 500px;
+}
+
+#descriptionProduit {
+  grid-column-start: 2 span;
+  text-align: justify;
+  padding: 1%;
+}
+
+.span > p {
+  margin-top: 5px;
+  font-size: 14px;
+}
+
+.span > h3 {
+  text-align: center;
+  font-family: cursive;
+  color: #363636;
+}
+
+.span-img {
+  position: relative;
+  top: 0;
+  max-height: 50%;
+}
+
+#detail-img {
+  height: 40vh;
+}
+
+.add {
+  position: absolute;
+  display: grid;
+  width: 100%;
+  bottom: 2%;
+  justify-content: center;
+}
+
+.span-detail .add {
+  position: relative;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+}
+
+.btn {
+  color: white;
+  padding-top: 10px;
+  border-radius: 20px;
+  background-color: #ffd347;
+  cursor: pointer;
+  height: 40px;
+  width: 150px;
+}
+
+.span-detail .btn {
+  color: white;
+  font-size: 2em;
+  padding-top: 30px;
+  border-radius: 10px;
+  background-color: #ffd347;
+  cursor: pointer;
+  height: 100px;
+  width: 300px;
+}
+
+.btn:hover {
+  color: white;
+  background-color: #ffca09;
+}
+
+.btn__qte {
+  color: black;
+  cursor: pointer;
+  height: auto;
+  width: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.span-detail .btn__qte {
+  color: black;
+  cursor: pointer;
+  height: auto;
+  width: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn__qte:hover {
+  color: rgb(92 92 92);
+}
+
+.justify-center {
+  display: inline-flex;
+}
+
+/* Catégorie */
+
+#categorie td {
+  padding-top: 10px;
+  width: 50%;
+  font-family: Georgia, serif;
+  font-size: 1.1em;
+}
+
+#categorie input {
+  margin-right: 10px;
+}
+
+#categorie {
+  width: 100%;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.align-left {
+  text-align: left;
+}
+
+html .side-menu {
+  display: inline-block;
+  position: relative;
+  height: 100vh;
+  width: 300px;
+  background-color: rgb(96	199	154 / 90%);
+  border: 2px solid #b8b8b8;
+  text-align: center;
+  overflow-x: hidden;
+  transition: width 1s;
+  z-index: 3;
+}
+
+html body .content {
+  flex: 1 1 auto;
+  width: 300px;
+  position: absolute;
+}
+
+html body .content #list-toggle {
+  display: none;
+}
+
+html body .content #list-toggle + label {
+  position: absolute;
+  top: 40%;
+  left: 298px;
+  background-color: rgb(184	184	184 / 60%);
+  border: 2px solid #b8b8b8;
+  border-top-right-radius: 110px;
+  border-bottom-right-radius: 110px;
+  padding: 10px 15px 10px 10px;
+  font-size: 20px;
+  transition: left 1s;
+  z-index: 1;
+}
+
+html body .content #list-toggle + label::after {
+  content: " < ";
+}
+
+html body .content #list-toggle + label:hover {
+  background: rgb(96	199	154 / 10%);
+}
+
+html body .content #list-toggle:checked ~ .side-menu {
+  width: 0;
+}
+
+html body .content #list-toggle:checked + label {
+  left: 0;
+}
+
+html body .content #list-toggle:checked + label::after {
+  content: " > ";
+}
+
+.side-menu h2 {
+  font-family: cursive;
+}
+
+/* Catégorie fin */
+
+/* ===== FORM ===== */
+.l-form {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.form {
+  width: 360px;
+  padding: 4rem 2rem;
+  border-radius: 1rem;
+  box-shadow: 0 10px 25px rgb(92 99 105 / 20%);
+}
+
+.form__title {
+  font-weight: 400;
+  margin-bottom: 3rem;
+}
+
+.form__div {
+  position: relative;
+  height: 20px;
+  width: 50px;
+}
+
+.span-detail .form__div {
+  position: relative;
+  height: 50px;
+  width: 90px;
+}
+
+.form__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  font-size: var(--normal-font-size);
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  outline: none;
+  padding: 1rem 0;
+  background: none;
+  z-index: 1;
+  text-align: center;
+}
+
+.span-detail .form__input {
+  font-size: 26px;
+}
+
+.form__label {
+  position: absolute;
+  left: 1rem;
+  top: 1rem;
+  padding: 0 0.25rem;
+  background-color: #fff;
+  color: var(--input-color);
+  font-size: var(--normal-font-size);
+  transition: 0.3s;
+}
+
+.form__button {
+  display: block;
+  margin-left: auto;
+  padding: 0.75rem 2rem;
+  outline: none;
+  border: none;
+  background-color: var(--first-color);
+  color: #fff;
+  font-size: var(--normal-font-size);
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.form__button:hover {
+  box-shadow: 0 10px 36px rgb(0 0 0 / 15%);
+}
+
+/* Input focus move up label */
+.form__input:focus + .form__label {
+  top: -0.5rem;
+  left: 0.8rem;
+  color: var(--first-color);
+  font-size: var(--small-font-size);
+  font-weight: 500;
+  z-index: 1;
+}
+
+/* Input focus sticky top label */
+.form__input:not(:placeholder-shown).form__input:not(:focus) + .form__label {
+  top: -0.5rem;
+  left: 0.8rem;
+  font-size: var(--small-font-size);
+  font-weight: 500;
+  z-index: 2;
+}
+
+/* Input focus */
+.form__input:focus {
+  border: 1.5px solid var(--first-color);
+}
+
+/* ~~~~~~~~~~~~~~~~~~~~ Media Query starts ~~~~~~~~~~~~~~~~~~~~~ */
+@media (max-width: 634px) {
+  a:hover {
+    background:
+      linear-gradient(
+        93deg,
+        rgb(94 129 207 / 100%) 16%,
+        rgb(94 161 187 / 100%) 55%
+      );
+  }
+
+  nav {
+    height: 120px;
+    min-width: 464px;
+  }
+}
+
+@media (max-width: 1136px) {
+  #descriptionProduit {
+    grid-column-start: 1 span;
+  }
+}
+
+/* ~~~~~~~~~~~~~~~~~~~~ Media query ends ~~~~~~~~~~~~~~~~~~~~~ */
+
+.mb-1 {
+  margin-bottom: 5px;
+}
+
+.mt-1 {
+  margin-top: 5px;
+}
+
+.ml-1 {
+  margin-left: 5px;
+}
+
+.mr-1 {
+  margin-right: 5px;
+}
+
+.mb-2 {
+  margin-bottom: 10px;
+}
+
+.mt-2 {
+  margin-top: 10px;
+}
+
+.ml-2 {
+  margin-left: 10px;
+}
+
+.mr-2 {
+  margin-right: 10px;
+}
+
+.mb-3 {
+  margin-bottom: 15px;
+}
+
+.mt-3 {
+  margin-top: 15px;
+}
+
+.ml-3 {
+  margin-left: 15px;
+}
+
+.mr-3 {
+  margin-right: 15px;
+}
+
+.mb-4 {
+  margin-bottom: 20px;
+}
+
+.mt-4 {
+  margin-top: 20px;
+}
+
+.ml-4 {
+  margin-left: 20px;
+}
+
+.mr-4 {
+  margin-right: 20px;
+}
+
+.border {
+  border: solid black 1px;
+}
+
+.box-shadow {
+  box-shadow: 3px 2px 3px 1px rgb(0 0 0 / 40%);
+}
+
+.bg-white {
+  background-color: white;
+}

index.html

+<!DOCTYPE html>
+<html lang="fr" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
+    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
+    <script src="./js/main.js" defer></script>
+    <title></title>
+  </head>
+  <body>
+    <header>
+      <nav>
+        <ul>
+          <li><a href="#">Produits</a></li>
+          <li><a href="#">Producteurs</a></li>
+          <li><a href="#">Panier</a></li>
+        </ul>
+        <label class="logo">LeHangar</label>
+      </nav>
+    </header>
+    <div class="content">
+      <input type="checkbox" id="list-toggle" checked>  <label for="list-toggle">  </label>
+      <div class="side-menu">
+        <h2 class="display-6 mt-3"> Catégories</h2>
+          <table id="categorie" class="mt-4">
+            <tr><td class="align-right"><input type="checkbox" name="" value="lait"></td><td class="align-left">Produits laitiers</td></tr>
+            <tr><td class="align-right"><input type="checkbox" name="" value="feculent"></td><td class="align-left">Féculents</td></tr>
+            <tr><td class="align-right"><input type="checkbox" name="" value="legume"></td><td class="align-left">Légumes</td></tr>
+            <tr><td class="align-right"><input type="checkbox" name="" value="fruit"></td><td class="align-left">Fruits</td></tr>
+          </table>
+      </div>
+    </div>
+    <div class="container">
+      <div class="span" id="span1">
+        <img class="span-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKs_e9tdbWRTq0ppcLsvKrkrxxdp9aagbRww&usqp=CAU" alt="">
+        <h3>Pomme de terre</h3>
+        <p>2.00€ / kg</p>
+        <div class="add">
+          <div class="mb-2">
+            <div class="justify-center">
+              <a class="btn__qte" onclick="minus(input1)"><i class="fas fa-minus"></i></a>
+              <div class="form__div mb-3">
+                <input type="number" min="0" class="form__input" id="input1" placeholder=" " value="0">
+              </div>
+              <a class="btn__qte" href="#" onclick="plus(input1)"><i class="fas fa-plus"></i></a>
+            </div>
+            <br>
+          </div>
+          <a href="#" class="btn" onclick="add(input1)">Ajouter au panier</a>
+        </div>
+      </div>
+      <div class="span">
+        <img class="span-img" src="https://www.semaille.com/9016-large_default/carotte-nantaise-2.jpg" alt="">
+        <h3>Carottes</h3>
+        <p>2.00€ / kg</p>
+        <div class="add">
+          <div class="mb-2">
+            <div class="justify-center">
+              <a class="btn__qte" onclick="minus(input2)"><i class="fas fa-minus"></i></a>
+              <div class="form__div mb-3">
+                <input type="number" min="0" class="form__input" id="input2" placeholder=" " value="0">
+              </div>
+              <a class="btn__qte" href="#" onclick="plus(input2)"><i class="fas fa-plus"></i></a>
+            </div>
+            <br>
+          </div>
+          <a href="#" class="btn" onclick="add(input1)">Ajouter au panier</a>
+        </div>
+      </div>
+      <div class="span">
+        <img class="span-img" src="https://bo.tauzietnco.fr/3479-large_default/feuille-de-chene-1-piece-c4-0.jpg" alt="">
+        <h3>Salade feuilles de chênes</h3>
+        <p>1.30€ / unité</p>
+        <div class="add">
+          <div class="mb-2">
+            <div class="justify-center">
+              <a class="btn__qte" onclick="minus(input3)"><i class="fas fa-minus"></i></a>
+              <div class="form__div mb-3">
+                <input type="number" min="0" class="form__input" id="input3" placeholder=" " value="0">
+              </div>
+              <a class="btn__qte" href="#" onclick="plus(input3)"><i class="fas fa-plus"></i></a>
+            </div>
+            <br>
+          </div>
+          <a href="#" class="btn" onclick="add(input1)">Ajouter au panier</a>
+        </div>
+      </div>
+      <div class="span">
+
+      </div>
+      <div class="span">
+
+      </div>
+      <div class="span">
+
+      </div>
+    </div>
+  </body>
+</html>

js/main.js

+function plus(input){
+    input.value = parseInt(input.value) + 1
+}
+
+function minus(input){
+    input.value = Math.max(parseInt(input.value) - 1, 0)
+}
\ No newline at end of file

produitDetail.html

+<!DOCTYPE html>
+<html lang="fr" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
+    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
+    <title></title>
+  </head>
+  <body>
+    <header>
+      <nav>
+        <ul>
+          <li><a href="#">Produits</a></li>
+          <li><a href="#">Producteurs</a></li>
+          <li><a href="#">Panier</a></li>
+        </ul>
+        <label class="logo">LeHangar</label>
+      </nav>
+    </header>
+    <h1 class="mt-4">Pomme de terre</h1>
+    <div class="container-detail">
+      <div class="span-detail box-shadow bg-white">
+        <img id="detail-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKs_e9tdbWRTq0ppcLsvKrkrxxdp9aagbRww&usqp=CAU" alt="">
+      </div>
+      <div class="span-detail">
+        <div class="add">
+          <div style="margin-top: 30%;">
+            <div class="justify-center">
+              <a class="btn__qte" onclick="minus(prix)"><i class="fas fa-minus fa-2x"></i></a>
+              <div class="form__div mb-3">
+                <input type="number" class="form__input" id="prix" placeholder=" " value="0">
+              </div>
+              <a class="btn__qte" href="#" onclick="plus(prix)"><i class="fas fa-plus fa-2x"></i></a>
+            </div>
+            <p>2.00€ / kilo</p>
+            <br>
+          </div>
+          <a href="#" class="btn" onclick="add(prix)">Ajouter au panier</a>
+        </div>
+      </div>
+      <div class="span-detail">
+        <h2>Produit par ...</h2>
+      </div>
+      <div class="span-detail border" id="descriptionProduit">
+        <p>description</p>
+    </div>
+    </div>
+    <script src="./js/main.js"></script>
+  </body>
+</html>