diff --git a/.gitattributes b/.gitattributes
deleted file mode 100644
index dfe0770..0000000
--- a/.gitattributes
+++ /dev/null
@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..01f6814
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+
+.idea/workspace.xml
+.idea/vcs.xml
+.idea/php.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
deleted file mode 100644
index 8259a9d..0000000
--- a/.idea/workspace.xml
+++ /dev/null
@@ -1,170 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- "associatedIndex": 7
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 1701067775248
-
-
- 1701067775248
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/CautionMarkGraphic.PNG b/CautionMarkGraphic.PNG
deleted file mode 100644
index ef17aaa..0000000
Binary files a/CautionMarkGraphic.PNG and /dev/null differ
diff --git a/CautionMarkGraphic.webp b/CautionMarkGraphic.webp
deleted file mode 100644
index 63df48d..0000000
Binary files a/CautionMarkGraphic.webp and /dev/null differ
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e73e398
--- /dev/null
+++ b/README.md
@@ -0,0 +1,12 @@
+# Générateur de PDP Fortnite
+
+
+
+
+
+
+
+## À propos du projet
+bienvenu sur le débot de mon projet **site générateur de pdp** ! Ce projet répond à une problématique qui m'as fait face après avoir réalisé plusieur fois mon évènement de pdp gratuit sur mon twitter. **Mais c'est quoi une pdp d'abord ?** Une PDP est l'acronyme de photo de profils et à chaque nouvelle saison de fortnite j'organisé un évènement sur mon compte twitter pour offrire des PDP dans le thème de la prochaine saison à tout ceux qui le souhaitent en échange d'un abonnement d'un like et d'un retweet. Le problème c'est que j'ai réalisé ces pdp à la main sur photoshop et que plus j'ai réalisé cet évènement plus j'avais de commande, jusqu'au dernier en date ou j'ai été sudmergé de demande.
+## Solution
+J'ai alors commencé à réfléchir sur une solution pour cela automatisé. J'ai donc eu l'idée de créer un site qui va générer des pdp personnalisés via des paramètres sur ce le site.
\ No newline at end of file
diff --git a/Twitter_Verified_Badge.svg b/Twitter_Verified_Badge.svg
deleted file mode 100644
index 1b729ab..0000000
--- a/Twitter_Verified_Badge.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/bordure1.png b/bordure1.png
deleted file mode 100644
index 5d5f323..0000000
Binary files a/bordure1.png and /dev/null differ
diff --git a/bordure1.webp b/bordure1.webp
deleted file mode 100644
index e84c678..0000000
Binary files a/bordure1.webp and /dev/null differ
diff --git a/bordure2.png b/bordure2.png
deleted file mode 100644
index a5857cf..0000000
Binary files a/bordure2.png and /dev/null differ
diff --git a/bordure2.webp b/bordure2.webp
deleted file mode 100644
index 872b551..0000000
Binary files a/bordure2.webp and /dev/null differ
diff --git a/code-crea.png b/code-crea.png
deleted file mode 100644
index e76cc09..0000000
Binary files a/code-crea.png and /dev/null differ
diff --git a/code-crea.webp b/code-crea.webp
deleted file mode 100644
index 9c3c5d6..0000000
Binary files a/code-crea.webp and /dev/null differ
diff --git a/exemple/1.png b/exemple/1.png
deleted file mode 100644
index 92b4ccf..0000000
Binary files a/exemple/1.png and /dev/null differ
diff --git a/exemple/1.webp b/exemple/1.webp
deleted file mode 100644
index 038ae4b..0000000
Binary files a/exemple/1.webp and /dev/null differ
diff --git a/exemple/2.png b/exemple/2.png
deleted file mode 100644
index 741c6a9..0000000
Binary files a/exemple/2.png and /dev/null differ
diff --git a/exemple/2.webp b/exemple/2.webp
deleted file mode 100644
index 65c9ff0..0000000
Binary files a/exemple/2.webp and /dev/null differ
diff --git a/exemple/3.png b/exemple/3.png
deleted file mode 100644
index 214dbf8..0000000
Binary files a/exemple/3.png and /dev/null differ
diff --git a/exemple/3.webp b/exemple/3.webp
deleted file mode 100644
index 53087dd..0000000
Binary files a/exemple/3.webp and /dev/null differ
diff --git a/exemple/4.png b/exemple/4.png
deleted file mode 100644
index 68fd4b5..0000000
Binary files a/exemple/4.png and /dev/null differ
diff --git a/exemple/4.webp b/exemple/4.webp
deleted file mode 100644
index 1a05914..0000000
Binary files a/exemple/4.webp and /dev/null differ
diff --git a/fond/ancien_script.js b/fond/ancien_script.js
deleted file mode 100644
index 792d719..0000000
--- a/fond/ancien_script.js
+++ /dev/null
@@ -1,211 +0,0 @@
-
-//Definition des images
-let bg=new Image();
-bg.src = "/pdp_generator/fond/fond_default.png";
-
-//Definition des varibales par défaut
-let initial = "";
-let dataURL = "#";
-let name = "😎";
-let color = "white"
-let txt_style = "source-over"
-let txt_style_active = false
-
-
-//Recuperation des element dans le DOM
-
-const alert_initial = document.createElement("p").textContent = "Le text ne doit pas être supérieure à 3 lettre";
-alert_initial.className = "alert_initial";
-
-const canvas = document.querySelector("canvas");
-const ctx = canvas.getContext('2d');
-
-const download = document.querySelector("#c_download");
-
-const b_color_def = document.querySelector("#color_def");
-const b_color_red = document.querySelector("#color_red");
-const b_color_blue = document.querySelector("#color_blue");
-const b_color_yellow = document.querySelector("#color_yellow");
-const b_color_green = document.querySelector("#color_green");
-const b_color_purple = document.querySelector("#color_purple");
-const c_cloud = document.querySelector("#cloud");
-const c_txt_style = document.querySelector("#text-style");
-const b_color = document.querySelector(".button_color")
-const twitter_result = document.querySelector("#twitter_result_img");
-
-function getValue() {
- initial = document.querySelector("#initial").value;
-
-//verifie que le text ne fait pas plus de 3 lettres
-
- if (initial.length > 3){
- console.log("Le text ne doit pas être supérieure à 3 lettre")
- name = "";
- drawn();
- } else {
- name = initial
- console.log(initial.length);
- }
-
-//Modifi la taille de la police par rapport aux nombres de lettres
-
- if (name.length === 1) {
- ctx.font = "800px 'Burbank Big Condensed Black'";
- drawn()
- }
- if (name.length === 2) {
- ctx.font = "600px 'Burbank Big Condensed Black'";
- drawn()
- }
- if (name.length === 3) {
- ctx.font = "400px 'Burbank Big Condensed Black'";
- drawn();
- }
-}
-
-c_txt_style.onclick = function (){
- if (c_txt_style.checked === true){
- txt_style_active = true;
- drawn()
- }else {
- txt_style_active = false;
- drawn();
- }
-}
-
-b_color_def.onclick = function (){
- color = "#ffff"
- if (txt_style_active === true){
- txt_style = "overlay"
- } else {
- txt_style = "source-over"
- }
- drawn()
-}
-b_color_red.onclick = function (){
- color = "red"
- if (txt_style_active === true){
- txt_style = "color"
- } else {
- txt_style = "source-over"
- }
- drawn()
-}
-b_color_blue.onclick = function (){
- color = "#3ba4ff";
- if (txt_style_active === true){
- txt_style = "color"
- } else {
- txt_style = "source-over"
- }
- drawn()
-}
-b_color_yellow.onclick = function (){
- color = "#ffe000";
- if (txt_style_active === true){
- txt_style = "color"
- } else {
- txt_style = "source-over"
- }
- drawn()
-}
-b_color_green.onclick = function (){
- color = "#226b11";
- if (txt_style_active === true){
- txt_style = "color"
- } else {
- txt_style = "source-over"
- }
- drawn();
-}
-b_color_purple.onclick = function (){
- color = "#b426e1";
- if (txt_style_active === true){
- txt_style = "color"
- } else {
- txt_style = "source-over"
- }
- drawn();
-}
-
-function color_verif(){
- if (txt_style_active === true){
- if (color === "#ffff"){ //Nuage Blanc
- txt_style = "overlay";
- }
- if (color === "red"){ //Nuage Rouge
- txt_style = "color";
- }
- if (color === "#32ded8"){ //Nuage Bleu
- txt_style = "color";
- }
- if (color === "#ffe000"){
- txt_style = "color";
- }
- if (color === "#226b11"){
- txt_style = "color";
- }
- if (color === "#b426e1"){
- txt_style = "color";
- }else {
- if (txt_style_active === false){
- txt_style = "source-over";
- }
- }
- }
-}
-
-// window.onload = function (){
-// ctx.globalCompositeOperation = "source-over";
-// ctx.drawImage(bg,0,0, canvas.width, canvas.height);
-// ctx.filter = "none";
-// ctx.fillStyle = color;
-// ctx.textAlign = "center";
-// ctx.textBaseline = "middle";
-// ctx.font = "600px 'Burbank Big Condensed Black'";
-// ctx.shadowBlur = 30;
-// ctx.shadowColor = "rgba(0,0,0,0.4)";
-// ctx.fillText(name,canvas.width/2, canvas.height/1.8)
-// ctx.globalCompositeOperation = "source-over";
-// dataURL = canvas.toDataURL("image/png")
-// twitter_result.src = dataURL
-// }
-
-bg.onload = drawn();
-
-function drawn(){
-
- color_verif()
- ctx.globalCompositeOperation = "source-over";
- // ctx.filter = "blur(10px)";
- bg.onload = function (){
- console.log(bg.src)
- ctx.drawImage(bg,0,0, canvas.width, canvas.height);
- }
- ctx.filter = "none";
- ctx.fillStyle = color;
- ctx.textAlign = "center";
- ctx.textBaseline = "middle";
- ctx.font = "600px 'Burbank Big Condensed Black'";
- ctx.strokeStyle = "rgba(0,0,0,0.4)";
- ctx.lineWidth = 15;
- ctx.globalCompositeOperation = "source-over";
- ctx.strokeText(name.toLocaleUpperCase(),canvas.width/2, canvas.height/1.8);
- ctx.filter = "none";
- ctx.globalCompositeOperation = txt_style;
- ctx.fillText(name.toLocaleUpperCase(),canvas.width/2, canvas.height/1.8);
-
- ctx.globalCompositeOperation = "source-over";
-
- dataURL = canvas.toDataURL("image/png")
- download.download = "PDP_" + initial + ".jpeg";
- twitter_result.src = dataURL
- // Download
-}
-
-download.onclick=function(){
- if (download.href === "#") {
- } else {
- download.href = dataURL;
- }
-}
\ No newline at end of file
diff --git a/fond/default.png b/fond/default.png
deleted file mode 100644
index 5aea929..0000000
Binary files a/fond/default.png and /dev/null differ
diff --git a/fond/fond-ciel.png b/fond/fond-ciel.png
deleted file mode 100644
index 51c162a..0000000
Binary files a/fond/fond-ciel.png and /dev/null differ
diff --git a/fond/fond-ciel2.png b/fond/fond-ciel2.png
deleted file mode 100644
index 148949b..0000000
Binary files a/fond/fond-ciel2.png and /dev/null differ
diff --git a/fond/fond-ciel3.png b/fond/fond-ciel3.png
deleted file mode 100644
index 60e2730..0000000
Binary files a/fond/fond-ciel3.png and /dev/null differ
diff --git a/fond/fond_banner.webp b/fond/fond_banner.webp
deleted file mode 100644
index be61fad..0000000
Binary files a/fond/fond_banner.webp and /dev/null differ
diff --git a/fond/fond_banner1.jpg b/fond/fond_banner1.jpg
deleted file mode 100644
index f4bde59..0000000
Binary files a/fond/fond_banner1.jpg and /dev/null differ
diff --git a/fond/fond_banner_twitter.png b/fond/fond_banner_twitter.png
deleted file mode 100644
index ffafda5..0000000
Binary files a/fond/fond_banner_twitter.png and /dev/null differ
diff --git a/fond/fond_bleu_vert.png b/fond/fond_bleu_vert.png
deleted file mode 100644
index a19d26c..0000000
Binary files a/fond/fond_bleu_vert.png and /dev/null differ
diff --git a/fond/fond_bleu_violet.png b/fond/fond_bleu_violet.png
deleted file mode 100644
index 0cb0a7e..0000000
Binary files a/fond/fond_bleu_violet.png and /dev/null differ
diff --git a/fond/fond_default.png b/fond/fond_default.png
deleted file mode 100644
index 8153dc5..0000000
Binary files a/fond/fond_default.png and /dev/null differ
diff --git a/fond/fond_magma.png b/fond/fond_magma.png
deleted file mode 100644
index 7d4c841..0000000
Binary files a/fond/fond_magma.png and /dev/null differ
diff --git a/font/BurbankBigCondensed-Black.otf b/font/BurbankBigCondensed-Black.otf
deleted file mode 100644
index 86f3bc6..0000000
Binary files a/font/BurbankBigCondensed-Black.otf and /dev/null differ
diff --git a/index.html b/index.html
deleted file mode 100644
index d02d9f4..0000000
--- a/index.html
+++ /dev/null
@@ -1,261 +0,0 @@
-
-
-
-
-
- Team renard | PDP générator
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Team Renard
-
-
-
-
-
-
-
-
Attention, tu ne peut mettre seulement que 3 lettres dans ta pdp !
-
-
-
-
-
-
Modifie ta PDP
-
-
-
-
-
- Envoyer
-
-
-
Couleur :
- Par défaut
- Beige
- Rouge
- Bleu
- Jaune
- Vert
- Violet
- Rose
- Orange
- Noir
-
-
-
Fond :
-
Fond fortnite
-
Fond mosaique :
-
Par défaut
-
Shild
-
Magma
-
Bleu/violet
-
Fond galactique :
-
Teaser 1
-
Teaser 2
-
Teaser 3
-
-
-
Style supplémentaire :
-
- Texte transparent
-
-
- Texte lumineux
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Des PDP plus belle, plus extra !
-
-
Tu veux une photo de profil qui sorte du lot ? Avec encore plus d'options ?
- Eh bien, tu tombes bien, car j'offre des photos de profils personnalisé fait manuellement avec plus d'options pour seulement 2,99 € !
-
Comment faire pour en bénéficier ?
- C'est très simple si tu es intéressé par cette offre, je t'invite à me contacter sur Twitter ou par mail "renardbleu84100@gmail.com " et de me faire ta demande.
-
Cette offre est à vie et tu ne seras pas obligé de payer pour ta prochaine demande.
-
-
-
-
-
-
-
-
À propos du site
-
Bienvenue sur la partie de génération de PDP du site, un projet dédié à la communauté dynamique de La Team Renard ! Ce site a été créé en reconnaissance de votre soutien continu et pour offrir une façon unique d'afficher les couleurs de la saison Fortnite actuelle. Epic game n'est en aucun cas affilié à ce site
-
- À Propos de La Team Renard
- La Team Renard va bien au-delà d'une simple communauté ; elle est un groupe soudé de renard partageant des passions communes. Ce site est notre moyen de vous exprimer notre gratitude pour votre fidélité et de vous permettre de personnaliser votre expérience en arborant fièrement les couleurs de la saison fortnite actuelle.
-
-
- Soutenez La Team Renard
- Vous avez le pouvoir de soutenir La Team Renard davantage ! Utilisez le code créateur "renardbleu" dans la boutique Fortnite lors de vos achats. Chaque contribution aide à renforcer notre communauté et à créer des opportunités pour des événements et des activités passionnants.
-
-
- Conditions d'utilisation
- L'utilisation de PDP Generator est soumise aux conditions suivantes :
-
- Les images générées par PDP Generator sont destinées à un usage personnel et ou commerciales.
-
- Nous vous encourageons à l'utiliser de manière responsable et respectueuse.
-
- Toute tentative de vol, de reproduction ou de distribution non autorisée du contenu de ce site est strictement interdite et sera sujet à des mesures légales.
-
- Merci de faire partie de La Team Renard, et ensemble, continuons à vivre de grandes aventures dans l'univers de Fortnite !
-
-
-
-
-
-
- un p'tit soutien please ?
- code créateur : renardbleu
-
-
- Revenir en haut de page
-
-
-
-
-
-
\ No newline at end of file
diff --git a/logo-renard-site.png b/logo-renard-site.png
deleted file mode 100644
index 425aa31..0000000
Binary files a/logo-renard-site.png and /dev/null differ
diff --git a/logo-site.png b/logo-site.png
deleted file mode 100644
index 34ec3aa..0000000
Binary files a/logo-site.png and /dev/null differ
diff --git a/logo-site.webp b/logo-site.webp
deleted file mode 100644
index c0274eb..0000000
Binary files a/logo-site.webp and /dev/null differ
diff --git a/logo.PNG b/logo.PNG
deleted file mode 100644
index 031ce35..0000000
Binary files a/logo.PNG and /dev/null differ
diff --git a/logo.webp b/logo.webp
deleted file mode 100644
index aa1bc7d..0000000
Binary files a/logo.webp and /dev/null differ
diff --git a/nuage/nuage_blue.png b/nuage/nuage_blue.png
deleted file mode 100644
index 375831b..0000000
Binary files a/nuage/nuage_blue.png and /dev/null differ
diff --git a/nuage/nuage_defaut.png b/nuage/nuage_defaut.png
deleted file mode 100644
index 155bf52..0000000
Binary files a/nuage/nuage_defaut.png and /dev/null differ
diff --git a/nuage/nuage_green.png b/nuage/nuage_green.png
deleted file mode 100644
index 91a9e44..0000000
Binary files a/nuage/nuage_green.png and /dev/null differ
diff --git a/nuage/nuage_red.png b/nuage/nuage_red.png
deleted file mode 100644
index 1e585f1..0000000
Binary files a/nuage/nuage_red.png and /dev/null differ
diff --git a/nuage/nuage_yellow.png b/nuage/nuage_yellow.png
deleted file mode 100644
index 8f089c2..0000000
Binary files a/nuage/nuage_yellow.png and /dev/null differ
diff --git a/script.js b/script.js
deleted file mode 100644
index 0cfb830..0000000
--- a/script.js
+++ /dev/null
@@ -1,145 +0,0 @@
-//Definition des images
-let bg=new Image();
-bg.src = "fond/default.png";
-
-//Definition des varibales par défaut
-let initial = "";
-let dataURL = "#";
-let name = "😎";
-let color = "white"
-let txt_style = "source-over"
-let txt_style_active = false
-let bg_load = null
-let font = "600px 'Burbank Big Condensed Black'";
-let shadow = "rgba(0,0,0,0.9)";
-let shadow_active = false
-
-//Recuperation des element dans le DOM
-
-const canvas = document.querySelector("canvas");
-const ctx = canvas.getContext('2d');
-
-const alert_initial = document.createElement("p").textContent = "Le text ne doit pas être supérieure à 3 lettre";
-alert_initial.className = "alert_initial";
-
-const alert = document.querySelector(".alert");
-
-const download = document.querySelector("#c_download");
-
-const c_txt_lueur = document.querySelector("#text-lueur")
-const c_txt_style = document.querySelector("#text-style");
-const b_color = document.querySelector(".button_color")
-const twitter_result = document.querySelector("#twitter_result_img");
-
-//Récupération du text
-
-function getValue() {
- initial = document.querySelector("#initial").value;
-
-//verifie que le text ne fait pas plus de 3 lettres
-
- if (initial.length > 3){
- console.log("Le text ne doit pas être supérieure à 3 lettre")
- name = "❌";
- font = "500px 'Burbank Big Condensed Black'"
- drawn();
- alert.style.display = "flex"
- alert.style.transform = "translatey(0px)"
- } else {
- name = initial
- alert.style.display = "none"
- alert.style.transform = "translatey(-60px)"
-
-//Modifi la taille de la police par rapport aux nombres de lettres
-
- if (name.length === 1) {
- font = "800px 'Burbank Big Condensed Black'";
- drawn();
- }
- if (name.length === 2) {
- font = "600px 'Burbank Big Condensed Black'";
- drawn();
- }
- if (name.length === 3) {
- font = "400px 'Burbank Big Condensed Black'";
- drawn();
- }
- }
-}
-
-c_txt_style.onclick = function lueur_verif(){
- if (c_txt_style.checked === true){
- txt_style_active = true;
- color_style_verif();
- }else {
- txt_style_active = false;
- color_style_verif();
- }
-}
-
-c_txt_lueur.onclick = function (){
- if (c_txt_lueur.checked === true){
- shadow_active = true
- lueur_verif();
- }else {
- shadow_active = false
- lueur_verif();
- }
-}
-
-function lueur_verif(){
- if (shadow_active === true){
- shadow = color;
- drawn();
- }else {
- shadow = "rgba(0,0,0,0.9)";
- drawn();
- }
-}
-
-function color_style_verif(){
- if (txt_style_active === true){
- txt_style = "soft-light"
- } else {
- txt_style = "source-over"
- }
- drawn();
-}
-
-function bg_loading(){
- bg.onload = function (){
- bg_load = bg;
- drawn();
- }
-}
-
-function drawn(){
-
- ctx.globalCompositeOperation = "source-over";
- ctx.drawImage(bg_load,0,0, canvas.width, canvas.height);
- ctx.textAlign = "center";
- ctx.textBaseline = "middle";
- ctx.font = font;
-
- ctx.shadowOffsetX = 0;
- ctx.shadowOffsetY = 0;
- ctx.shadowBlur = 30;
- ctx.shadowColor = shadow;
-
- ctx.fillStyle = color;
- ctx.globalCompositeOperation = txt_style;
- ctx.fillText(name.toLocaleUpperCase(),canvas.width/2, canvas.height/1.7);
-
- dataURL = canvas.toDataURL("image/png")
- download.download = "PDP_" + initial + ".jpeg";
- twitter_result.src = dataURL
-}
-
-download.onclick=function(){
- if (download.href === "#") {
- } else {
- download.href = dataURL;
- }
-}
-
-window.onload = bg_loading();
\ No newline at end of file
diff --git a/style.css b/style.css
deleted file mode 100644
index 17751db..0000000
--- a/style.css
+++ /dev/null
@@ -1,1134 +0,0 @@
-@import url("font/BurbankBigCondensed-Black.otf");
-
-:root{
- --bg-color-dark: #111111;
- --bg-color-menu: #232323;
- --text-color-menu: #ffff;
- --main-color: #0090e2;
- --main-color-fn: #1c8d55;
- --main-color-fn-hover: #67cbdc;
- --title-color: #151a1d;
- --main-color--dark: #06376e;
-}
-
-@font-face {
- font-family: "Burbank Big Condensed Black";
- src: url("font/BurbankBigCondensed-Black.otf");
-}
-*{
- scroll-behavior: smooth;
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: 'Open Sans', sans-serif;
-}
-body{
- background-color: var(--bg-color-dark);
- height: max-content;
-}
-
-/*Nav barre*/
-nav {
- position: fixed;
- width: 100%;
- height: 60px;
- top: 0;
- right: 0;
- z-index: 1000;
- display: flex;
- align-items: center;
- justify-content: space-between;
- background: var(--bg-color-menu);
-}
-.logo{
- display: flex;
- align-items: center;
- text-decoration: none;
-}
-.logo svg{
- fill: var(--text-color-menu);
- width: 50px;
- height: 50px;
-}
-.logo .icon{
- margin: 13px;
-}
-.logo:hover svg{
- fill: var(--main-color);
- transition: all 0.20s ease-in;
-}
-.logo:hover span{
- color: var(--main-color);
- transition: all 0.20s ease-in;
-}
-.logo span{
- font-size: 1.6rem;
- font-weight: 700;
- color: var(--text-color-menu);
-}
-.navbar{
- display: flex;
- list-style: none;
- padding-right: 150px;
-}
-.navbar a{
- color: var(--text-color-menu);
- font-size: 1.4rem;
- font-weight: 500;
- padding: 5px 0;
- margin: 0px 30px;
- text-decoration: none;
-}
-.navbar a.active{
- color: var(--main-color);
-}
-.navbar a:hover{
- color: var(--main-color);
- transition: all 0.20s ease-in;
-}
-.main{
- display: flex;
- align-items: center;
-}
-.main a{
- margin-right: 25px;
- margin-left: 10px;
- color: var(--text-color-menu);
- font-size: 1.4rem;
- font-weight: 500;
- text-decoration: none;
-}
-.user {
- display: flex;
- align-items: center;
-}
-.user i{
- color: var(--main-color);
- font-size: 40px;
- margin-right: 13px;
-}
-.main a:hover{
- color: var(--main-color);
- transition: all 0.20s ease-in;
-}
-#menu-icon{
- font-size: 60px;
- color: var(--main-color);
- cursor: pointer;
- z-index: 10001;
- display: none;
-}
-
-@media (max-width: 1280px){
- nav{
- padding: 14px 2%;
- transition: .2s;
- }
- .navbar a{
- padding: 5px 0;
- margin: 0px 20px;
- font-size: 2.5rem;
- }
-}
-
-@media (max-width: 1090px){
- header{
- margin-top: 150px;
- }
- nav{
- height: 150px;
- }
- .logo svg {
- width: 100px;
- height: 100px;
- }
- .logo span {
- font-size: 3rem;
- }
- #menu-icon{
- display: block;
- }
- .bannerbox2{
- display: none;
- }
- .navbar{
- position: absolute;
- top: 100%;
- right: -100%;
- width: 270px;
- height: max-content;
- background: var(--main-color);
- display: none;
- flex-direction: column;
- justify-content: flex-start;
- border-radius: 10px;
- transition: all .50s ease;
- padding: 5px;
- }
- .navbar a{
- display: block;
- margin: 12px 0;
- padding: 0px 25px;
- transition: all .50s ease;
- }
- .navbar a.active{
- color: var(--title-color);
- }
- .navbar a:hover{
- color: var(--title-color);
- transform: translateX(7px);
- }
- .navbar.open{
- right: 2%;
- display: flex;
- }
-
-}
-
-@media (max-width: 500px){
- .navbar{
- height: 35vh;
- }
-}
-
-.alert{
- background-color: #e72e2e;
- position: fixed;
- top: 0;
- margin-top: 60px;
- height: 60px;
- width: 100%;
- z-index: 999;
- border-radius: 0 0 10px 10px;
- display: none;
- align-items: center;
- justify-content: center;
- text-align: center;
- transform: translatey(-60px);
- transition: all 0.3s ease-out;
-}
-@media (max-width: 1090px){
- .alert{
- margin-top: 149px;
- }
- .alert h3{
- font-size: 1.9rem;
- }
-}
-
-/*header Banner*/
-
-
-header {
- background-image: url("fond/fond_banner.webp");
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- width: 100%;
- height: 600px;
- display: flex;
- justify-content: space-evenly;
- align-items: center;
- padding-bottom: 200px;
- clip-path: polygon(0 0, 100% 0%, 100% 80%, 50% 100%, 0 80%);
-}
-header div{
- text-align: center;
- align-content: center;
- display: grid;
-}
-header h1{
- color: var(--text-color-menu);
- font-size: 5rem;
- text-shadow: rgba(21, 26, 29, 1) 0 4px 10px;
- font-family: 'Burbank Big Condensed Black';
- letter-spacing: 3px;
-}
-header p{
- font-size: 1.5rem;
- font-weight: bold;
- color: var(--text-color-menu);
- text-shadow: rgba(21, 26, 29, 1) 0 4px 10px;
-}
-header img{
- height: 250px;
- align-items: center;
- text-shadow: rgba(21, 26, 29, 1) 0 4px 10px;
-}
-@media (max-width: 1500px){
- .sec2{
- height: 600px;
- margin: 0;
- }
- header img{
- height: 100px;
- position: absolute;
- left: 20px;
- top: 70px;
- }
- header h1 {
- font-size: 6.5rem;
- }
- header p {
- font-size: 2.5rem;
- width: 70%;
- margin: auto;
- }
- .title{
- font-size: 5rem;
- }
-}
-@media (max-width: 1090px){
- header img{
- top: 170px;
- }
-}
-
-
-/*Main*/
-
-
-main{
- top: -220px;
- position: relative;
- display: grid;
- width: 100%;
-}
-.sec1{
- display: flex;
- margin: auto;
-}
-.title{
- color: var(--text-color-menu);
- font-size: 3rem;
- text-shadow: rgba(21, 26, 29, 0.6) 0 0 10px;
- font-family: 'Burbank Big Condensed Black';
- letter-spacing: 3px;
- padding: 15px;
-}
-.title span{
- font-size: 1.5rem;
- font-family: 'Burbank Big Condensed Black';
-}
-@media (max-width: 1500px){
- .title{
- font-size: 5rem;
- letter-spacing: 5px;
- margin-left: 10px;
- }
-}
-
-
-/*Twitter*/
-
-.twitter-result{
- margin-left: 150px;
-}
-.twitter{
- padding: 5px;
- background-color: black;
- color: #ffff;
- border-radius: 10px;
- font-family: inherit;
-}
-.twitter-result .banner{
- width: 700px;
- height: 233px;
- background-color: #0090e2;
- background-image: url("https://pbs.twimg.com/media/GIIhKM8WUAAClen?format=jpg&name=large");
- background-size: cover;
- background-position: center;
-}
-.twitter .profile-top{
- display: flex;
- justify-content: end;
- height: 100px;
- position: relative;
- top: -150px;
-}
-.twitter .profile-top .button{
- margin: 10px;
- height: 34px;
- display: flex;
-}
-.twitter .plus {
- width: 34px;
- border-radius: 100%;
- border: 1px solid rgb(83, 100, 113);
- margin-left: 10px;
- display: flex;
- align-items: center;
- padding: 0 0 5px 9px;
- font-weight: 700;
- transition-duration: 0.2s;
-}
-.twitter .plus:hover{
- background-color: rgb(239, 243, 244, 0.1);
- cursor: pointer;
-}
-.twitter .msg{
- width: 34px;
- border-radius: 100%;
- border: 1px solid rgb(83, 100, 113);
- margin-left: 10px;
- display: flex;
- align-items: center;
- padding: 8px;
- font-weight: 100;
- transition-duration: 0.2s;
-}
-.twitter .msg:hover{
- background-color: rgb(239, 243, 244, 0.1);
- cursor: pointer;
-}
-.twitter .follow {
- margin-left: 10px;
- background-color: #fff;
- display: flex;
- align-items: center;
- color: #111111;
- padding: 0 16px;
- border-radius: 30px;
- font-weight: 700;
- transition-duration: 0.2s;
-}
-.twitter .follow:hover{
- background-color: rgb(239, 243, 244);
- cursor: pointer;
-}
-.twitter-result .profile img {
- border-radius: 100%;
- border: 5px solid black;
- position: relative;
- top: -75px;
- background: black;
- margin-left: 15px;
-}
-.twitter-result .profile img:hover{
- cursor: pointer;
-}
-.twitter .top{
- display: flex;
- align-items: center;
- padding: 5px;
-}
-.twitter .top:hover{
- cursor: pointer;
-}
-.twitter .top i{
- padding: 0 30px 0 10px;
-}
-.twitter .top p{
- color: rgb(113, 118, 123);
- font-size: 0.9rem;
-}
-.twitter .profile-name .name{
- display: flex;
-}
-.twitter .name svg{
- width: 20px;
-}
-.twitter .profile-name{
- padding-left: 15px;
- position: relative;
- top: -150px;
-}
-.twitter .profile-name p{
- color: rgb(113, 118, 123);
- font-size: 1rem;
-}
-.twitter .describ{
- padding-left: 15px;
- padding-top: 15px;
- position: relative;
- top: -150px;
-}
-.twitter .describ a{
- text-decoration: none;
- color: rgb(29, 155, 240);
-}
-.twitter .describ a:hover{
- text-decoration: underline;
-}
-.twitter .describ .joint{
- display: flex;
- color: rgb(113, 118, 123);
- padding-top: 15px;
-}
-.twitter .describ .joint i{
- padding-right: 5px;
-}
-.twitter .abo{
- padding: 15px;
- display: flex;
- color: rgb(113, 118, 123);
- position: relative;
- top: -150px;
-}
-.twitter .abo .abonnement:hover, .followers:hover{
- cursor: pointer;
- text-decoration: underline #ffff;
-}
-.twitter .abo .abonnement, .followers{
- display: flex;
- padding-right: 15px;
-}
-.twitter .abo span{
- padding-right: 5px;
- color: #ffffff;
- font-weight: 700;
-}
-@media (max-width: 1500px){
- .twitter-result{
- margin-left: 50px;
- }
-}
-.generator{
- color: var(--text-color-menu);
- justify-content: center;
-}
-.generator .contenu{
- display: grid;
- justify-content: center;
-}
-.generator .contenu canvas{
- border-radius: 10px;
- box-shadow: rgba(21, 26, 29, 0.6) 0 0 10px;
- width: 300px;
- margin-bottom: 15px;
-}
-.generator .contenu .option {
- width: 300px;
-}
-.generator .contenu .input-initial{
- margin: auto ;
- display: flex;
- justify-content: center;
-}
-.generator .contenu input[type=text]:focus-visible{
- border: 2px var(--main-color-fn-hover) solid;
-}
-.generator .contenu input[type=text]{
- background-color: var(--bg-color-menu);
- padding: 10px 15px;
- width: 10rem;
- color: var(--main-color-fn);
- border-radius: 10px;
- border: 2px var(--main-color-fn) solid;
- margin-right: 10px;
- text-align: center;
-}
-.generator .contenu .input-initial button{
- color: #fff;
- border: none;
- background-color: var(--main-color-fn);
- padding: 10px;
- position: relative;
- border-radius: 10px;
- transition: all 0.2s ease-out;
-}
-.generator .contenu .input-initial button:hover{
- background-color: var(--main-color-fn-hover);
- color: var(--title-color);
- cursor: pointer;
-}
-.generator .contenu .color{
- margin-top: 15px;
-}
-.generator .contenu .color button{
- margin: 2px;
- color: white;
- border: 2px #ffff solid;
- background-color: var(--bg-color-menu);
- padding: 5px;
- position: relative;
- border-radius: 5px;
- transition: all 0.2s ease-out;
-}
-.generator .contenu p{
- margin: 5px 0;
-}
-#color_def:hover{
- color: var(--title-color);
- border: 2px #ffff solid;
- background-color: #ffff;
- cursor: pointer;
-}
-#color_red{
- color: #ee2f2f;
- border: 2px #ee2f2f solid;
-}
-#color_red:hover{
- color: var(--title-color);
- background-color: #ee2f2f;
- cursor: pointer;
-}
-#color_blue{
- color: #32DED8FF;
- border: 2px #32DED8FF solid;
-}
-#color_blue:hover{
- color: var(--title-color);
- background-color: #32DED8FF;
- cursor: pointer;
-}
-#color_yellow{
- color: #eec12f;
- border: 2px #eec12f solid;
-}
-#color_yellow:hover{
- color: var(--title-color);
- background-color: #eec12f;
- cursor: pointer;
-}
-#color_purple{
- color: #b426e1;
- border: 2px #b426e1 solid;
-}
-#color_purple:hover{
- color: var(--title-color);
- background-color: #b426e1;
- cursor: pointer;
-}
-#color_green{
- color: #47c516;
- border: 2px #47c516 solid;
-}
-#color_green:hover{
- color: var(--title-color);
- background-color: #47c516;
- cursor: pointer;
-}
-#color_orange{
- color: #FD671CFF;
- border: 2px #FD671CFF solid;
-}
-#color_orange:hover{
- color: var(--title-color);
- background-color: #FD671CFF;
- cursor: pointer;
-}
-#color_beige{
- color: #d8b396;
- border: 2px #d8b396 solid;
-}
-#color_beige:hover{
- color: var(--title-color);
- background-color: #d8b396;
- cursor: pointer;
-}
-#color_black{
- color: #000000;
- border: 2px #000000 solid;
-}
-#color_black:hover{
- color: #fff;
- background-color: #000000;
- cursor: pointer;
-}
-#color_pink{
- color: #ff55c5;
- border: 2px #ff55c5 solid;
-}
-#color_pink:hover{
- color: var(--title-color);
- background-color: #ff55c5;
- cursor: pointer;
-}
-
-.generator .contenu .txt-style div{
- display: flex;
- margin-bottom: 5px;
-}
-.generator .contenu .txt-style div input{
- margin-right: 5px;
-}
-.generator .contenu a{
- text-decoration: none;
- color: #fff;
- border: none;
- background-color: var(--main-color-fn);
- padding: 10px 20px;
- position: relative;
- border-radius: 10px;
- transition: all 0.2s ease-out;
-}
-.generator .contenu a:hover{
- background-color: var(--main-color-fn-hover);
- color: var(--title-color);
- cursor: pointer;
-}
-.generator .contenu .download{
- display: flex;
- padding: 10px;
- justify-content: center;
-}
-.generator .contenu .fond button{
- color: white;
- margin: 2px;
- border: 2px #ffff solid;
- background-color: var(--bg-color-menu);
- padding: 5px;
- position: relative;
- border-radius: 5px;
- transition: all 0.2s ease-out;
-}
-.generator .contenu .fond button:hover{
- cursor: pointer;
-}
-#back_style1:hover{
- border: 2px transparent solid;
- background-color: #d8b396;
- color: var(--title-color);
-}
-#back_style1{
- color: #d8b396;
- border: 2px #d8b396 solid;
-}
-#back_style2{
- border: 2px #27d4ff solid;
- color: #27d4ff;
-}
-#back_style2:hover{
- border: 2px transparent solid;
- color: var(--title-color);
- background: linear-gradient(to bottom right, #27d4ff, #2affa2);
-}
-#back_style3{
- color: #ff5527;
- border: 2px #ff5527 solid;
-}
-#back_style3:hover{
- color: var(--title-color);
- border: 2px #ff5527 solid;
- background: linear-gradient(to bottom right, #ffcf2a, #ff4027);
-}
-#back_style4{
- color: #c626ff;
- border: 2px #c626ff solid;
-}
-#back_style4:hover{
- color: var(--title-color);
- border: 2px #c626ff solid;
- background: linear-gradient(to bottom right, #1a37ff, #c626ff);
-}
-#back_style5{
- color: #3282de;
- border: 2px #3282de solid;
-}
-#back_style5:hover{
- color: var(--title-color);
- background-color: #3282de;
- cursor: pointer;
-}
-#back_style6{
- color: #47c516;
- border: 2px #47c516 solid;
-}
-#back_style6:hover{
- color: var(--title-color);
- background-color: #47c516;
- cursor: pointer;
-}
-#back_style7{
- color: #d7429d;
- border: 2px #d7429d solid;
-}
-#back_style7:hover{
- color: var(--title-color);
- background-color: #d7429d;
- cursor: pointer;
-}
-.generator .contenu h2{
- padding-bottom: 10px;
- padding-top: 10px;
-}
-@media (max-width: 1090px){
- .sec1 {
- display: block;
- width: 100%;
- }
- .twitter{
- border-radius: 0;
- display: flex;
- justify-content: center;
- }
- .twitter-result{
- margin-left: 0;
- }
- #pdp-element{
- width: 550px;
- border-radius: 20px;
- }
-
- .generator .contenu input[type=text]{
- padding: 20px 15px;
- width: 23rem;
- font-size: 1.8rem;
- }
- .generator .contenu .input-initial button{
- padding: 20px 15px;
- font-size: 1.8rem;
-
- }
- .generator .contenu .color button{
- padding: 20px 15px;
- font-size: 1.8rem;
- margin: 5px;
- }
- .generator .contenu .fond button{
- padding: 20px 15px;
- margin: 5px;
- font-size: 1.8rem;
- }
- .generator .contenu .avatar button{
- padding: 20px 15px;
- margin: 5px;
- font-size: 1.8rem;
- }
- .generator .contenu h2 {
- font-size: 3rem;
- }
- .generator .contenu .option {
- width: 550px;
- }
- .generator .contenu .txt-style div input{
- width: 35px;
- height: 35px;
- }
- .generator .contenu p, .generator .contenu h3{
- font-size: 2rem;
- margin-left: 5px;
- margin-bottom: 10px;
- margin-top: 10px;
- }
- .generator .contenu span{
- font-size: 2.2rem;
- margin-left: 5px;
- }
- .generator .contenu label{
- font-size: 2.2rem;
- margin-left: 5px;
- }
- .generator .contenu .download a{
- font-size: 1.8rem;
- padding: 20px 40px;
- margin: 20px;
- }
-}
-
-.sec2{
- margin: 50px 0;
- height: max-content;
- background-color: var(--main-color-fn-hover);
- display: flex;
- justify-content: space-between;
-}
-.sec2 .bordure{
- margin: 0 40px;
-}
-.sec2 .contenu{
- width: 55%;
- text-align: center;
- display: grid;
- align-content: space-between;
-}
-.sec2 .title{
- margin: 30px 0;
- text-shadow: var(--main-color-fn) 0 0 15px;
-}
-.sec2 p{
- margin: 10px;
- color: #151515;
- font-size: 1.5rem;
-}
-.sec2 .exemple{
- position: absolute;
- width: 150px;
- box-shadow: rgba(21, 26, 29, 1) 0 5px 20px;
-}
-.sec2 .ex1{
- transform: rotatez(20deg);
- top: 32%;
- left: 12%;
-}
-.sec2 .ex2{
- transform: rotatez(-10deg);
- top: 33%;
- left: 80%;
-}.sec2 .ex3{
- transform: rotatez(-30deg);
- top: 41%;
- left: 75%;
- }
-.sec2 .ex4{
- transform: rotatez(-5deg);
- top: 40%;
- left: 7%;
-}
-.sec2 .contenu a{
- text-decoration: none;
- color: #fff;
- border: none;
- background-color: var(--main-color-fn);
- padding: 10px 20px;
- position: relative;
- border-radius: 10px;
- transition: all 0.2s ease-out;
- margin: auto;
- display: flex;
- width: max-content;
-}
-.sec2 .contenu .offre span{
- position: absolute;
- font-family: 'Burbank Big Condensed Black';
- color: #fff;
- font-size: 2rem;
- transform: translateX(180px) translatey(-10px) rotateZ(20deg);
- z-index: 5;
- letter-spacing: 2px;
- text-shadow: rgb(250, 107, 45) 0 5px 20px;
-}
-.sec2 .contenu a:hover{
- background-color: #eea724;
- color: var(--title-color);
- cursor: pointer;
-}
-.sec2 .contenu .offre{
- margin: 50px 0;
-}
-
-@media (max-width: 1500px) {
- .sec2 {
- margin: 0;
- }
-}
-
-@media (max-width: 1090px){
- .sec2 .ex1{
- top: 45%;
- left: 8%;
- }
- .sec2 .ex2{
- top: 43%;
- left: 80%;
- }
- .sec2 .ex3{
- top: 53.8%;
- left: 81%;
- }
- .sec2 .ex4{
- top: 51%;
- left: 7%;
- }
- .sec2{
- margin: 0;
- }
- .sec2 p{
- font-size: 1.8rem;
- }
- .sec2 .contenu a{
- font-size: 1.8rem;
- padding: 20px;
- margin: 0;
- }
- .sec2 .contenu .offre span{
- transform: translateX(190px) translatey(-10px) rotateZ(20deg);
- font-size: 3rem;
- }
-}
-
-
-
-.sec3{
- height: 100%;
- background-color: var(--main-color-fn);
- clip-path: polygon(0 20%, 100% 0, 100% 90%, 0% 80%);
- padding: 155px;
- display: flex;
- align-items: center;
-}
-.sec3 .contenu{
- z-index: 5;
- width: 70%;
- margin: auto;
-}
-.sec3 .title {
- text-shadow: none;
- color: #fff;
-}
-.sec3 .contenu h3 {
- color: #fff;
- margin-top: 10px;
- font-family: 'Burbank Big Condensed Black';
- font-size: 1.6rem;
- letter-spacing: 1px;
-}
-.sec3 .contenu p {
- color: #fff;
- font-size: 1.1rem;
- margin-top: 10px;
-}
-@media (max-width: 1090px){
- .sec3 .contenu p{
- font-size: 1.8rem;
- }
- .sec3 .contenu h3 {
- font-size: 2.5rem;
- }
- .sec3{
- margin-top: 50px;
- padding: 350px 0;
- }
- .sec3 .contenu{
- width: 80%;
- }
-}
-
-.sec4{
- height: max-content;
- display: grid;
- justify-content: center;
-}
-.sec4 img{
- height: 500px;
- margin-right: 120px;
-}
-.sec4 h2{
- margin: 10px auto;
- color: #fff;
- width: 70%;
- text-align: center;
-}
-
-.mouv-up{
- text-decoration: none;
- color: var(--title-color);
- border: none;
- background-color: var(--main-color-fn);
- padding: 10px 20px;
- position: relative;
- border-radius: 10px;
- transition: all 0.2s ease-out;
- margin: 50px auto;
- width: 15%;
- text-align: center;
- transform: translateY(100px);
-}
-.mouv-up:hover{
- background-color: var(--main-color-fn-hover);
- color: #ffff;
- cursor: pointer;
-}
-@media (max-width: 1090px){
- .mouv-up{
- font-size: 1.8rem;
- width: 40%;
- }
- .sec4 h2{
- font-size: 2rem;
- width: 100%;
- }
- .sec4 img{
- height: 700px;
- }
-}
-
-footer a{
- text-decoration: none;
- color: #ffffff;
- margin-bottom: 5px;
-}
-footer a:hover{
- color: var(--main-color);
-}
-footer .mail {
- text-decoration-line: none;
-}
-footer .mail:hover {
- text-decoration-line: underline;
-}
-footer i{
- margin: 10px;
- color: #ffffff;
- font-size: 1.5rem;
-}
-footer i:hover{
- cursor: pointer;
- color: var(--main-color);
-}
-.contact{
- display: grid;
- align-content: start;
- text-align: start;
-}
-.soutien{
- display: grid;
- align-content: start;
- text-align: start;
-}
-.soutien p{
- margin-bottom: 10px;
-}
-.about-site{
- width: 50%;
- text-align: start;
-}
-.footer-tow-title{
- justify-content: space-between;
- display: flex;
- width: 1000px;
-}
-footer hr {
- width: 80%;
- margin: 10px auto 5px auto;
-}
-footer{
- display: grid;
- padding: 20px;
- width: 100%;
- background-color: var(--bg-color-menu);
- height: 300px;
- justify-content: center;
- text-align: center;
-}
-footer h2, footer p{
- color: #ffffff;
-}
-footer h2{
- margin-bottom: 10px;
- margin-top: 10px;
-}
-@media (max-width: 1090px){
- footer {
- height: max-content;
- display: grid;
- padding-bottom: 100px;
- }
- .footer-tow-title{
- width: 100%;
- display: grid;
- }
- .about-site{
- width: 100%;
- text-align: start;
- justify-items: center;
- }
- footer p, footer a{
- font-size: 0.7rem;
- }
- footer h2 {
- font-size: 1.8rem;
- margin: 20px 0;
- }
- footer hr {
- border: 2px solid #fff;
- width: 80%;
- margin: 50px auto 30px auto;
- }
- footer i{
- margin: 30px;
- color: #ffffff;
- font-size: 3rem;
- }
-}
\ No newline at end of file
diff --git a/test.md b/test.md
new file mode 100644
index 0000000..7d4786d
--- /dev/null
+++ b/test.md
@@ -0,0 +1 @@
+ceci est un test
\ No newline at end of file