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 - - - - - - - - - - - - - - -
-

Couleur :

- - - - - - - - - - -
-
-

Fond :

- -

Fond mosaique :

- - - - -

Fond galactique :

- - - -
-
-

Style supplémentaire :

-
- -
-
- -
-
- - - - - - -
- exemple1 - exemple2 - exemple3 - exemple4 - bordure de gauche -
-

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.

-
- -
- bordure de droite -
-
-
-

À 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 !

-
-
-
-
-
- code creéateur renard bleu -

un p'tit soutien please ?

-

code créateur : renardbleu

-
- - Revenir en haut de page - -
- -
-
- - - - - - - - - - - - - - - - - - -

© Renard Bleu Studio, 2024. Tous droits réservés.

-
-
- - - - \ 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