Ir ao conteúdo
  • Cadastre-se

Henry007

Membro Pleno
 Perfil  Explorar Conteúdo

  • Posts

    22

  • Cadastrado em

  • Última visita

Reputação

0
  1. Henry007 começou a seguir divs que não se arrumam e como atribuir mais de um valor para uma constante no JS
  2. Henry007
    const el = document.querySelector("#text"); const text = "texto teste"; const interval = 40; function showtext(el, text, interval){ const char = texto.split("").reverse(); const typer = setInterval(() => { if(!char.length){ return clearInterval(typer); } const next = char.pop(); el.innerHTML += next; }, interval); } showtext(el, text,text1, interval) eu quero fazer um programa que vai escrever um texto com paragrafos, e eu tive a ideia de separar os paragrafos por valores, mas não sei como colocar mais de um valor na constante
  3. Henry007
    continuou desalinhado o coração ficou no canto inferior esquerdo, vou deixar o print da tela
  4. Henry007
    tirei uma screenshot de como esta, o jeito que eu quero é que o coração fique em cima do texto mas não muito distante vou colocar um exemplo utilizando o paint.
  5. Henry007
    eu quero alinhar duas divs uma para ficar centralizada (txt-animado) e uma para ficar em cima (heart), mas não estou conseguindo alinhar elas dessa forma segue o codigo delas <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style3.css"> <title>Document</title> </head> <body> <div class="txt-animado"> Você é a única <span></span> </div> <div class="heart"></div> </body> </html> body { background-image:var(--color-bg); margin: 0 ; } .txt-animado{ display: flex; flex-direction:row; background-image:var(--color-bg); min-height: 100vh; overflow: hidden; align-items: center; justify-content: center; } :root{ --color-bg: linear-gradient(to top,#010329,#000005); --color-glass:linear-gradient(to left,#142544,#1a9092); --color-water:linear-gradient(to left,#142544,#1b6d6e); } .heart{ top: 50%; } .txt-animado{ font-size: 45px; font-weight: 500; } .txt-animado span{ position: relative; } .txt-animado span::before{ content: ""; color: red; animation: palavras 20s infinite; } .txt-animado span::after{ content: ""; position: absolute; height: calc(100% + 5px); border-left: 2px solid red; right: -10px; animation: cursor 1000ms infinite, digitar 20s steps(20) infinite ; width: calc(100% + 12px); background-color: #000114; } @keyframes digitar { 10%, 15%, 30%, 35%, 50%, 55%, 70%, 75%, 90%, 95%{ width: 0; } 5%, 20%, 25%, 40%, 45%, 60%, 65%, 80%, 85%{ width: calc(100% + 12px); } } @keyframes cursor{ 0%{ border-left: 2px solid #000114; } } @keyframes palavras{ 0%,20%{ content: "teste"; } 21%,40%{ content: "teste1"; } 41%,60%{ content: "teste3"; } 61%,80%{ content: "teste4"; } 81%,100%{ content: "teste5"; } } .heart{ height: 90px; width: 90px; margin-top: 10px; background: #f20044; position: sticky ; transform: rotate(-45deg); box-shadow: -10px 10px 90px #f20044; animation: pulse 0.6s linear infinite; } @keyframes pulse { 0%{ transform: rotate(-45deg) scale(1.07); } 80%{ transform: rotate(-45deg) scale(1.0); } 100%{ transform: rotate(-45deg) scale(0.8); } } .heart::before{ content: ""; position: absolute; height: 90px; width: 90px; background: #f20044; top: -50%; border-radius: 50px; box-shadow: -10px -10px 90px #f20044; } .heart::after{ content: ""; position: absolute; height: 90px; width: 90px; background: #f20044; right: -50%; border-radius: 50px; box-shadow: 10px 10px 90px #f20044; }
  6. Henry007 começou a seguir Configuração Ryzen 5 4600G + B450M + 16GB 3200 MHz vale a pena? , Eu quero fazer um site, com umas flores de fundo , Criar botão de imprimir pdf e 1 outro
  7. Henry007
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <script src="main.js" type="text/javascript"></script><title>Flowers</title> </head> <body class="not-loaded"> <div class="night"></div> <div class="flowers"> <div class="flower flower--1"> <div class="flower__leafs flower__leafs--1"> <div class="flower__leaf flower__leaf--1"></div> <div class="flower__leaf flower__leaf--2"></div> <div class="flower__leaf flower__leaf--3"></div> <div class="flower__leaf flower__leaf--4"></div> <div class="flower__white-circle"></div> <div class="flower__light flower__light--1"></div> <div class="flower__light flower__light--2"></div> <div class="flower__light flower__light--3"></div> <div class="flower__light flower__light--4"></div> <div class="flower__light flower__light--5"></div> <div class="flower__light flower__light--6"></div> <div class="flower__light flower__light--7"></div> <div class="flower__light flower__light--8"></div> </div> <div class="flower__line"> <div class="flower__line__leaf flower__line__leaf--1"></div> <div class="flower__line__leaf flower__line__leaf--2"></div> <div class="flower__line__leaf flower__line__leaf--3"></div> <div class="flower__line__leaf flower__line__leaf--4"></div> <div class="flower__line__leaf flower__line__leaf--5"></div> <div class="flower__line__leaf flower__line__leaf--6"></div> </div> </div> <div class="flower flower--2"> <div class="flower__leafs flower__leafs--2"> <div class="flower__leaf flower__leaf--1"></div> <div class="flower__leaf flower__leaf--2"></div> <div class="flower__leaf flower__leaf--3"></div> <div class="flower__leaf flower__leaf--4"></div> <div class="flower__white-circle"></div> <div class="flower__light flower__light--1"></div> <div class="flower__light flower__light--2"></div> <div class="flower__light flower__light--3"></div> <div class="flower__light flower__light--4"></div> <div class="flower__light flower__light--5"></div> <div class="flower__light flower__light--6"></div> <div class="flower__light flower__light--7"></div> <div class="flower__light flower__light--8"></div> </div> <div class="flower__line"> <div class="flower__line__leaf flower__line__leaf--1"></div> <div class="flower__line__leaf flower__line__leaf--2"></div> <div class="flower__line__leaf flower__line__leaf--3"></div> <div class="flower__line__leaf flower__line__leaf--4"></div> </div> </div> <div class="flower flower--3"> <div class="flower__leafs flower__leafs--3"> <div class="flower__leaf flower__leaf--1"></div> <div class="flower__leaf flower__leaf--2"></div> <div class="flower__leaf flower__leaf--3"></div> <div class="flower__leaf flower__leaf--4"></div> <div class="flower__white-circle"></div> <div class="flower__light flower__light--1"></div> <div class="flower__light flower__light--2"></div> <div class="flower__light flower__light--3"></div> <div class="flower__light flower__light--4"></div> <div class="flower__light flower__light--5"></div> <div class="flower__light flower__light--6"></div> <div class="flower__light flower__light--7"></div> <div class="flower__light flower__light--8"></div> </div> <div class="flower__line"> <div class="flower__line__leaf flower__line__leaf--1"></div> <div class="flower__line__leaf flower__line__leaf--2"></div> <div class="flower__line__leaf flower__line__leaf--3"></div> <div class="flower__line__leaf flower__line__leaf--4"></div> </div> </div> <div class="grow-ans" style="--d:1.2s"> <div class="flower__g-long"> <div class="flower__g-long__top"></div> <div class="flower__g-long__bottom"></div> </div> </div> <div class="growing-grass"> <div class="flower__grass flower__grass--1"> <div class="flower__grass--top"></div> <div class="flower__grass--bottom"></div> <div class="flower__grass__leaf flower__grass__leaf--1"></div> <div class="flower__grass__leaf flower__grass__leaf--2"></div> <div class="flower__grass__leaf flower__grass__leaf--3"></div> <div class="flower__grass__leaf flower__grass__leaf--4"></div> <div class="flower__grass__leaf flower__grass__leaf--5"></div> <div class="flower__grass__leaf flower__grass__leaf--6"></div> <div class="flower__grass__leaf flower__grass__leaf--7"></div> <div class="flower__grass__leaf flower__grass__leaf--8"></div> <div class="flower__grass__overlay"></div> </div> </div> <div class="growing-grass"> <div class="flower__grass flower__grass--2"> <div class="flower__grass--top"></div> <div class="flower__grass--bottom"></div> <div class="flower__grass__leaf flower__grass__leaf--1"></div> <div class="flower__grass__leaf flower__grass__leaf--2"></div> <div class="flower__grass__leaf flower__grass__leaf--3"></div> <div class="flower__grass__leaf flower__grass__leaf--4"></div> <div class="flower__grass__leaf flower__grass__leaf--5"></div> <div class="flower__grass__leaf flower__grass__leaf--6"></div> <div class="flower__grass__leaf flower__grass__leaf--7"></div> <div class="flower__grass__leaf flower__grass__leaf--8"></div> <div class="flower__grass__overlay"></div> </div> </div> <div class="grow-ans" style="--d:2.4s"> <div class="flower__g-right flower__g-right--1"> <div class="leaf"></div> </div> </div> <div class="grow-ans" style="--d:2.8s"> <div class="flower__g-right flower__g-right--2"> <div class="leaf"></div> </div> </div> <div class="grow-ans" style="--d:2.8s"> <div class="flower__g-front"> <div class="flower__g-front__leaf-wrapper flower__g-front__leaf-wrapper--1"> <div class="flower__g-front__leaf"></div> </div> <div class="flower__g-front__leaf-wrapper flower__g-front__leaf-wrapper--2"> <div class="flower__g-front__leaf"></div> </div> <div class="flower__g-front__leaf-wrapper flower__g-front__leaf-wrapper--3"> <div class="flower__g-front__leaf"></div> </div> <div class="flower__g-front__leaf-wrapper flower__g-front__leaf-wrapper--4"> <div class="flower__g-front__leaf"></div> </div> <div class="flower__g-front__leaf-wrapper flower__g-front__leaf-wrapper--5"> <div class="flower__g-front__leaf"></div> </div> <div class="flower__g-front__leaf-wrapper flower__g-front__leaf-wrapper--6"> <div class="flower__g-front__leaf"></div> </div> <div class="flower__g-front__leaf-wrapper flower__g-front__leaf-wrapper--7"> <div class="flower__g-front__leaf"></div> </div> <div class="flower__g-front__leaf-wrapper flower__g-front__leaf-wrapper--8"> <div class="flower__g-front__leaf"></div> </div> <div class="flower__g-front__line"></div> </div> </div> <div class="grow-ans" style="--d:3.2s"> <div class="flower__g-fr"> <div class="leaf"></div> <div class="flower__g-fr__leaf flower__g-fr__leaf--1"></div> <div class="flower__g-fr__leaf flower__g-fr__leaf--2"></div> <div class="flower__g-fr__leaf flower__g-fr__leaf--3"></div> <div class="flower__g-fr__leaf flower__g-fr__leaf--4"></div> <div class="flower__g-fr__leaf flower__g-fr__leaf--5"></div> <div class="flower__g-fr__leaf flower__g-fr__leaf--6"></div> <div class="flower__g-fr__leaf flower__g-fr__leaf--7"></div> <div class="flower__g-fr__leaf flower__g-fr__leaf--8"></div> </div> </div> <div class="long-g long-g--0"> <div class="grow-ans" style="--d:3s"> <div class="leaf leaf--0"></div> </div> <div class="grow-ans" style="--d:2.2s"> <div class="leaf leaf--1"></div> </div> <div class="grow-ans" style="--d:3.4s"> <div class="leaf leaf--2"></div> </div> <div class="grow-ans" style="--d:3.6s"> <div class="leaf leaf--3"></div> </div> </div> <div class="long-g long-g--1"> <div class="grow-ans" style="--d:3.6s"> <div class="leaf leaf--0"></div> </div> <div class="grow-ans" style="--d:3.8s"> <div class="leaf leaf--1"></div> </div> <div class="grow-ans" style="--d:4s"> <div class="leaf leaf--2"></div> </div> <div class="grow-ans" style="--d:4.2s"> <div class="leaf leaf--3"></div> </div> </div> <div class="long-g long-g--2"> <div class="grow-ans" style="--d:4s"> <div class="leaf leaf--0"></div> </div> <div class="grow-ans" style="--d:4.2s"> <div class="leaf leaf--1"></div> </div> <div class="grow-ans" style="--d:4.4s"> <div class="leaf leaf--2"></div> </div> <div class="grow-ans" style="--d:4.6s"> <div class="leaf leaf--3"></div> </div> </div> <div class="long-g long-g--3"> <div class="grow-ans" style="--d:4s"> <div class="leaf leaf--0"></div> </div> <div class="grow-ans" style="--d:4.2s"> <div class="leaf leaf--1"></div> </div> <div class="grow-ans" style="--d:3s"> <div class="leaf leaf--2"></div> </div> <div class="grow-ans" style="--d:3.6s"> <div class="leaf leaf--3"></div> </div> </div> <div class="long-g long-g--4"> <div class="grow-ans" style="--d:4s"> <div class="leaf leaf--0"></div> </div> <div class="grow-ans" style="--d:4.2s"> <div class="leaf leaf--1"></div> </div> <div class="grow-ans" style="--d:3s"> <div class="leaf leaf--2"></div> </div> <div class="grow-ans" style="--d:3.6s"> <div class="leaf leaf--3"></div> </div> </div> <div class="long-g long-g--5"> <div class="grow-ans" style="--d:4s"> <div class="leaf leaf--0"></div> </div> <div class="grow-ans" style="--d:4.2s"> <div class="leaf leaf--1"></div> </div> <div class="grow-ans" style="--d:3s"> <div class="leaf leaf--2"></div> </div> <div class="grow-ans" style="--d:3.6s"> <div class="leaf leaf--3"></div> </div> </div> <div class="long-g long-g--6"> <div class="grow-ans" style="--d:4.2s"> <div class="leaf leaf--0"></div> </div> <div class="grow-ans" style="--d:4.4s"> <div class="leaf leaf--1"></div> </div> <div class="grow-ans" style="--d:4.6s"> <div class="leaf leaf--2"></div> </div> <div class="grow-ans" style="--d:4.8s"> <div class="leaf leaf--3"></div> </div> </div> <div class="long-g long-g--7"> <div class="grow-ans" style="--d:3s"> <div class="leaf leaf--0"></div> </div> <div class="grow-ans" style="--d:3.2s"> <div class="leaf leaf--1"></div> </div> <div class="grow-ans" style="--d:3.5s"> <div class="leaf leaf--2"></div> </div> <div class="grow-ans" style="--d:3.6s"> <div class="leaf leaf--3"></div> </div> </div> </div> </body> </html> Eu vi no tiktok um Vídeo de programação, onde aparece umas flores muito bonitas, é usado um arquivo .html um .js e um .css, eu procurei tutorias mas não achei, achei um Vídeo no youtube que da um link github, e ja entrega os arquivos mas ao executar, não aparece nada, vou deixar o link do Vídeo https://www.youtube.com/watch?v=ihAfDhTkMsQ , quem poder ajudar agradeço muito, e ja pra não esquecer eu não consegui instalar o ruby que aparece no Vídeo, provavelmente esta ai o erro, mas eu não sei como instalar o ruby.
  8. Henry007
    *, *::after, *::before { padding: 0; margin: 0; box-sizing: border-box; } :root { --dark-color: #000; } body { display: flex; align-items: flex-end; justify-content: center; min-height: 100vh; background-color: var(--dark-color); overflow: hidden; perspective: 1000px; padding: 50px 0px; } .night { position: fixed; left: 50%; top: 0; transform: translateX(-50%); width: 100%; height: 100%; filter: blur(0.1vmin); } .flowers { position: relative; transform: scale(0.9); } .flower { position: absolute; bottom: 10vmin; transform-origin: bottom center; z-index: 10; --fl-speed: 0.8s; &--1 { animation: moving-flower-1 4s linear infinite; .flower__line { $delay: 0.3s; height: 70vmin; animation-delay: $delay; &__leaf { &--1 { animation: blooming-leaf-right var(--fl-speed) 1.6s backwards; } &--2 { animation: blooming-leaf-right var(--fl-speed) 1.4s backwards; } &--3 { animation: blooming-leaf-left var(--fl-speed) 1.2s backwards; } &--4 { animation: blooming-leaf-left var(--fl-speed) 1s backwards; } &--5 { animation: blooming-leaf-right var(--fl-speed) 1.8s backwards; } &--6 { animation: blooming-leaf-left var(--fl-speed) 2s backwards; } } } } &--2 { left: 50%; transform: rotate(20deg); animation: moving-flower-2 4s linear infinite; .flower__line { height: 60vmin; animation-delay: 0.6s; &__leaf { &--1 { animation: blooming-leaf-right var(--fl-speed) 1.9s backwards; } &--2 { animation: blooming-leaf-right var(--fl-speed) 1.7s backwards; } &--3 { animation: blooming-leaf-left var(--fl-speed) 1.5s backwards; } &--4 { animation: blooming-leaf-left var(--fl-speed) 1.3s backwards; } } } } &--3 { left: 50%; transform: rotate(-15deg); animation: moving-flower-3 4s linear infinite; .flower__line { animation-delay: 0.9s; &__leaf { &--1 { animation: blooming-leaf-right var(--fl-speed) 2.5s backwards; } &--2 { animation: blooming-leaf-right var(--fl-speed) 2.3s backwards; } &--3 { animation: blooming-leaf-left var(--fl-speed) 2.1s backwards; } &--4 { animation: blooming-leaf-left var(--fl-speed) 1.9s backwards; } } } } &__leafs { position: relative; animation: blooming-flower 2s backwards; $delay: 0.8; $inc: 0.3; @for $i from 1 through 3 { &--#{$i} { $delay: $delay + $inc; animation-delay: #{$delay}s; } } &::after { content: ""; position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); width: 8vmin; height: 8vmin; background-color: #6bf0ff; filter: blur(10vmin); } } &__leaf { position: absolute; bottom: 0; left: 50%; width: 8vmin; height: 11vmin; border-radius: 51% 49% 47% 53% / 44% 45% 55% 69%; background-color: #a7ffee; background-image: linear-gradient(to top, #54b8aa, #a7ffee); transform-origin: bottom center; opacity: 0.9; box-shadow: inset 0 0 2vmin rgba(255, 255, 255, 0.5); &--1 { transform: translate(-10%, 1%) rotateY(40deg) rotateX(-50deg); } &--2 { transform: translate(-50%, -4%) rotateX(40deg); } &--3 { transform: translate(-90%, 0%) rotateY(45deg) rotateX(50deg); } &--4 { width: 8vmin; height: 8vmin; transform-origin: bottom left; border-radius: 4vmin 10vmin 4vmin 4vmin; transform: translate(-0%, 18%) rotateX(70deg) rotate(-43deg); background-image: linear-gradient(to top, #39c6d6, #a7ffee); z-index: 1; opacity: 0.8; } } &__white-circle { position: absolute; left: -3.5vmin; top: -3vmin; width: 9vmin; height: 4vmin; border-radius: 50%; background-color: #fff; &::after { content: ""; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 60%; height: 60%; border-radius: inherit; background-image: repeating-linear-gradient( 300deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), repeating-linear-gradient( 67.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), repeating-linear-gradient( 135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), repeating-linear-gradient( 112.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), repeating-linear-gradient( 112.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), repeating-linear-gradient( 22.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), repeating-linear-gradient( 22.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), repeating-linear-gradient( 135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), repeating-linear-gradient( 157.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), repeating-linear-gradient( 67.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), repeating-linear-gradient( 67.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px ), linear-gradient(90deg, RGB(255, 235, 18), RGB(255, 206, 0)); } } &__line { height: 55vmin; width: 1.5vmin; background-image: linear-gradient( to left, RGB(0, 0, 0, 0.2), transparent, rgba(255, 255, 255, 0.2) ), linear-gradient(to top, transparent 10%, #14757a, #39c6d6); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); animation: grow-flower-tree 4s backwards; &__leaf { --w: 7vmin; --h: calc(var(--w) + 2vmin); position: absolute; top: 20%; left: 90%; width: var(--w); height: var(--h); border-top-right-radius: var(--h); border-bottom-left-radius: var(--h); background-image: linear-gradient( to top, rgba(20, 117, 122, 0.4), #39c6d6 ); &--1 { transform: rotate(70deg) rotateY(30deg); } &--2 { top: 45%; transform: rotate(70deg) rotateY(30deg); } &--3, &--4, &--6 { border-top-right-radius: 0; border-bottom-left-radius: 0; border-top-left-radius: var(--h); border-bottom-right-radius: var(--h); left: -460%; top: 12%; transform: rotate(-70deg) rotateY(30deg); } &--4 { top: 40%; } &--5 { top: 0; transform-origin: left; transform: rotate(70deg) rotateY(30deg) scale(0.6); } &--6 { top: -2%; left: -450%; transform-origin: right; transform: rotate(-70deg) rotateY(30deg) scale(0.6); } } } &__light { position: absolute; bottom: 0vmin; width: 1vmin; height: 1vmin; background-color: RGB(255, 251, 0); border-radius: 50%; filter: blur(0.2vmin); animation: light-ans 4s linear infinite backwards; &:nth-child(odd) { background-color: #23f0ff; } &--1 { left: -2vmin; animation-delay: 1s; } &--2 { left: 3vmin; animation-delay: 0.5s; } &--3 { left: -6vmin; animation-delay: 0.3s; } &--4 { left: 6vmin; animation-delay: 0.9s; } &--5 { left: -1vmin; animation-delay: 1.5s; } &--6 { left: -4vmin; animation-delay: 3s; } &--7 { left: 3vmin; animation-delay: 2s; } &--8 { left: -6vmin; animation-delay: 3.5s; } } &__grass { --c: #159faa; --line-w: 1.5vmin; position: absolute; bottom: 12vmin; left: -7vmin; display: flex; flex-direction: column; align-items: flex-end; z-index: 20; transform-origin: bottom center; transform: rotate(-48deg) rotateY(40deg); &--1 { animation: moving-grass 2s linear infinite; } &--2 { left: 2vmin; bottom: 10vmin; transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg); opacity: 0.8; z-index: 0; animation: moving-grass--2 1.5s linear infinite; } &--top { width: 7vmin; height: 10vmin; border-top-right-radius: 100%; border-right: var(--line-w) solid var(--c); transform-origin: bottom center; transform: rotate(-2deg); } &--bottom { margin-top: -2px; width: var(--line-w); height: 25vmin; background-image: linear-gradient(to top, transparent, var(--c)); } &__leaf { --size: 10vmin; position: absolute; width: calc(var(--size) * 2.1); height: var(--size); border-top-left-radius: var(--size); border-top-right-radius: var(--size); background-image: linear-gradient( to top, transparent, transparent 30%, var(--c) ); z-index: 100; $speed-leaf: 2s; &--1 { top: -6%; left: 30%; --size: 6vmin; transform: rotate(-20deg); animation: growing-grass-ans--1 $speed-leaf 2.6s backwards; @keyframes growing-grass-ans--1 { 0% { transform-origin: bottom left; transform: rotate(-20deg) scale(0); } } } &--2 { top: -5%; left: -110%; --size: 6vmin; transform: rotate(10deg); animation: growing-grass-ans--2 $speed-leaf 2.4s linear backwards; @keyframes growing-grass-ans--2 { 0% { transform-origin: bottom right; transform: rotate(10deg) scale(0); } } } &--3 { top: 5%; left: 60%; --size: 8vmin; transform: rotate(-18deg) rotateX(-20deg); animation: growing-grass-ans--3 $speed-leaf 2.2s linear backwards; @keyframes growing-grass-ans--3 { 0% { transform-origin: bottom left; transform: rotate(-18deg) rotateX(-20deg) scale(0); } } } &--4 { top: 6%; left: -135%; --size: 8vmin; transform: rotate(2deg); animation: growing-grass-ans--4 $speed-leaf 2s linear backwards; @keyframes growing-grass-ans--4 { 0% { transform-origin: bottom right; transform: rotate(2deg) scale(0); } } } &--5 { top: 20%; left: 60%; --size: 10vmin; transform: rotate(-24deg) rotateX(-20deg); animation: growing-grass-ans--5 $speed-leaf 1.8s linear backwards; @keyframes growing-grass-ans--5 { 0% { transform-origin: bottom left; transform: rotate(-24deg) rotateX(-20deg) scale(0); } } } &--6 { top: 22%; left: -180%; --size: 10vmin; transform: rotate(10deg); animation: growing-grass-ans--6 $speed-leaf 1.6s linear backwards; @keyframes growing-grass-ans--6 { 0% { transform-origin: bottom right; transform: rotate(10deg) scale(0); } } } &--7 { top: 39%; left: 70%; --size: 10vmin; transform: rotate(-10deg); animation: growing-grass-ans--7 $speed-leaf 1.4s linear backwards; @keyframes growing-grass-ans--7 { 0% { transform-origin: bottom left; transform: rotate(-10deg) scale(0); } } } &--8 { top: 40%; left: -215%; --size: 11vmin; transform: rotate(10deg); animation: growing-grass-ans--8 $speed-leaf 1.2s linear backwards; @keyframes growing-grass-ans--8 { 0% { transform-origin: bottom right; transform: rotate(10deg) scale(0); } } } } &__overlay { position: absolute; top: -10%; right: 0%; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); filter: blur(1.5vmin); z-index: 100; } } &__g-long { --w: 2vmin; --h: 6vmin; --c: #159faa; position: absolute; bottom: 10vmin; left: -3vmin; transform-origin: bottom center; transform: rotate(-30deg) rotateY(-20deg); display: flex; flex-direction: column; align-items: flex-end; animation: flower-g-long-ans 3s linear infinite; @keyframes flower-g-long-ans { 0%, 100% { transform: rotate(-30deg) rotateY(-20deg); } 50% { transform: rotate(-32deg) rotateY(-20deg); } } &__top { top: calc(var(--h) * -1); width: calc(var(--w) + 1vmin); height: var(--h); border-top-right-radius: 100%; border-right: 0.7vmin solid var(--c); transform: translate(-0.7vmin, 1vmin); } &__bottom { width: var(--w); height: 50vmin; transform-origin: bottom center; background-image: linear-gradient(to top, transparent 30%, var(--c)); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); clip-path: polygon(35% 0, 65% 1%, 100% 100%, 0% 100%); } } &__g-right { position: absolute; bottom: 6vmin; left: -2vmin; transform-origin: bottom left; transform: rotate(20deg); .leaf { width: 30vmin; height: 50vmin; border-top-left-radius: 100%; border-left: 2vmin solid #079097; background-image: linear-gradient( to bottom, transparent, var(--dark-color) 60% ); -webkit-mask-image: linear-gradient(to top, transparent 30%, #079097 60%); } &--1 { animation: flower-g-right-ans 2.5s linear infinite; } &--2 { left: 5vmin; transform: rotateY(-180deg); animation: flower-g-right-ans--2 3s linear infinite; .leaf { height: 75vmin; filter: blur(0.3vmin); opacity: 0.8; } } @keyframes flower-g-right-ans { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(24deg) rotateX(-20deg); } } @keyframes flower-g-right-ans--2 { 0%, 100% { transform: rotateY(-180deg) rotate(0deg) rotateX(-20deg); } 50% { transform: rotateY(-180deg) rotate(6deg) rotateX(-20deg); } } } &__g-front { position: absolute; bottom: 6vmin; left: 2.5vmin; z-index: 100; transform-origin: bottom center; transform: rotate(-28deg) rotateY(30deg) scale(1.04); animation: flower__g-front-ans 2s linear infinite; @keyframes flower__g-front-ans { 0%, 100% { transform: rotate(-28deg) rotateY(30deg) scale(1.04); } 50% { transform: rotate(-35deg) rotateY(40deg) scale(1.04); } } &__line { width: 0.3vmin; height: 20vmin; background-image: linear-gradient( to top, transparent, #079097, transparent 100% ); position: relative; } &__leaf-wrapper { position: absolute; top: 0; left: 0; transform-origin: bottom left; transform: rotate(10deg); &:nth-child(even) { left: 0vmin; transform: rotateY(-180deg) rotate(5deg); animation: flower__g-front__leaf-left-ans 1s ease-in backwards; } &:nth-child(odd) { animation: flower__g-front__leaf-ans 1s ease-in backwards; } &--1 { top: -8vmin; transform: scale(0.7); animation: flower__g-front__leaf-ans 1s 5.5s ease-in backwards !important; } &--2 { top: -8vmin; transform: rotateY(-180deg) scale(0.7) !important; animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important; } &--3 { top: -3vmin; animation: flower__g-front__leaf-ans 1s 4.6s ease-in backwards; } &--4 { top: -3vmin; transform: rotateY(-180deg) scale(0.9) !important; animation: flower__g-front__leaf-left-ans-2 1s 4.6s ease-in backwards !important; } @keyframes flower__g-front__leaf-left-ans-2 { 0% { transform: rotateY(-180deg) scale(0); } } &--5, &--6 { top: 2vmin; } &--7, &--8 { top: 6.5vmin; } &--2 { animation-delay: 5.2s !important; } &--3 { animation-delay: 4.9s !important; } &--5 { animation-delay: 4.3s !important; } &--6 { animation-delay: 4.1s !important; } &--7 { animation-delay: 3.8s !important; } &--8 { animation-delay: 3.5s !important; } @keyframes flower__g-front__leaf-ans { 0% { transform: rotate(10deg) scale(0); } } @keyframes flower__g-front__leaf-left-ans { 0% { transform: rotateY(-180deg) rotate(5deg) scale(0); } } } &__leaf { width: 10vmin; height: 10vmin; border-radius: 100% 0% 0% 100% / 100% 100% 0% 0%; box-shadow: inset 0 2px 1vmin hsla(184, 97%, 58%, 0.2); background-image: linear-gradient( to bottom left, transparent, var(--dark-color) ), linear-gradient( to bottom right, #159faa 50%, transparent 50%, transparent ); -webkit-mask-image: linear-gradient( to bottom right, #159faa 50%, transparent 50%, transparent ); mask-image: linear-gradient( to bottom right, #159faa 50%, transparent 50%, transparent ); } } &__g-fr { position: absolute; bottom: -4vmin; left: vmin; transform-origin: bottom left; z-index: 10; animation: flower__g-fr-ans 2s linear infinite; @keyframes flower__g-fr-ans { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(4deg); } } .leaf { width: 30vmin; height: 50vmin; border-top-left-radius: 100%; border-left: 2vmin solid #079097; -webkit-mask-image: linear-gradient(to top, transparent 25%, #079097 50%); position: relative; z-index: 1; } &__leaf { position: absolute; top: 0; left: 0; width: 10vmin; height: 10vmin; border-radius: 100% 0% 0% 100% / 100% 100% 0% 0%; box-shadow: inset 0 2px 1vmin hsla(184, 97%, 58%, 0.2); background-image: linear-gradient( to bottom left, transparent, var(--dark-color) 98% ), linear-gradient( to bottom right, #23f0ff 45%, transparent 50%, transparent ); -webkit-mask-image: linear-gradient( 135deg, #159faa 40%, transparent 50%, transparent ); &--1 { left: 20vmin; transform: rotate(45deg); animation: flower__g-fr-leaft-ans-1 0.5s 5.2s linear backwards; @keyframes flower__g-fr-leaft-ans-1 { 0% { transform-origin: left; transform: rotate(45deg) scale(0); } } } &--2 { left: 12vmin; top: -7vmin; transform: rotate(25deg) rotateY(-180deg); animation: flower__g-fr-leaft-ans-6 0.5s 5s linear backwards; } &--3 { left: 15vmin; top: 6vmin; transform: rotate(55deg); animation: flower__g-fr-leaft-ans-5 0.5s 4.8s linear backwards; } &--4 { left: 6vmin; top: -2vmin; transform: rotate(25deg) rotateY(-180deg); animation: flower__g-fr-leaft-ans-6 0.5s 4.6s linear backwards; } &--5 { left: 10vmin; top: 14vmin; transform: rotate(55deg); animation: flower__g-fr-leaft-ans-5 0.5s 4.4s linear backwards; @keyframes flower__g-fr-leaft-ans-5 { 0% { transform-origin: left; transform: rotate(55deg) scale(0); } } } &--6 { left: 0vmin; top: 6vmin; transform: rotate(25deg) rotateY(-180deg); animation: flower__g-fr-leaft-ans-6 0.5s 4.2s linear backwards; @keyframes flower__g-fr-leaft-ans-6 { 0% { transform-origin: right; transform: rotate(25deg) rotateY(-180deg) scale(0); } } } &--7 { left: 5vmin; top: 22vmin; transform: rotate(45deg); animation: flower__g-fr-leaft-ans-7 0.5s 4s linear backwards; @keyframes flower__g-fr-leaft-ans-7 { 0% { transform-origin: left; transform: rotate(45deg) scale(0); } } } &--8 { left: -4vmin; top: 15vmin; transform: rotate(15deg) rotateY(-180deg); animation: flower__g-fr-leaft-ans-8 0.5s 3.8s linear backwards; @keyframes flower__g-fr-leaft-ans-8 { 0% { transform-origin: right; transform: rotate(15deg) rotateY(-180deg) scale(0); } } } } } } .long-g { position: absolute; bottom: 25vmin; left: -42vmin; transform-origin: bottom left; &--1 { bottom: 0vmin; transform: scale(0.8) rotate(-5deg); .leaf { -webkit-mask-image: linear-gradient( to top, transparent 40%, #079097 80% ) !important; &--1 { --w: 5vmin; --h: 60vmin; left: -2vmin; transform: rotate(3deg) rotateY(-180deg); } } } &--2, &--3 { bottom: -3vmin; left: -35vmin; transform-origin: center; transform: scale(0.6) rotateX(60deg); .leaf { -webkit-mask-image: linear-gradient( to top, transparent 50%, #079097 80% ) !important; &--1 { left: -1vmin; transform: rotateY(-180deg); } } } &--3 { left: -17vmin; bottom: 0vmin; .leaf { -webkit-mask-image: linear-gradient( to top, transparent 40%, #079097 80% ) !important; } } &--4 { left: 25vmin; bottom: -3vmin; transform-origin: center; transform: scale(0.6) rotateX(60deg); .leaf { -webkit-mask-image: linear-gradient( to top, transparent 50%, #079097 80% ) !important; } } &--5 { left: 42vmin; bottom: 0vmin; transform: scale(0.8) rotate(2deg); } &--6 { left: 0vmin; bottom: -20vmin; z-index: 100; filter: blur(0.3vmin); transform: scale(0.8) rotate(2deg); } &--7 { left: 35vmin; bottom: 20vmin; z-index: -1; filter: blur(0.3vmin); transform: scale(0.6) rotate(2deg); opacity: 0.7; } .leaf { --w: 15vmin; --h: 40vmin; --c: #1aaa15; position: absolute; bottom: 0; width: var(--w); height: var(--h); border-top-left-radius: 100%; border-left: 2vmin solid var(--c); -webkit-mask-image: linear-gradient( to top, transparent 20%, var(--dark-color) ); transform-origin: bottom center; &--0 { left: 2vmin; animation: leaf-ans-1 4s linear infinite; } &--1 { --w: 5vmin; --h: 60vmin; animation: leaf-ans-1 4s linear infinite; } &--2 { --w: 10vmin; --h: 40vmin; left: -0.5vmin; bottom: 5vmin; transform-origin: bottom left; transform: rotateY(-180deg); animation: leaf-ans-2 3s linear infinite; } &--3 { --w: 5vmin; --h: 30vmin; left: -1vmin; bottom: 3.2vmin; transform-origin: bottom left; transform: rotate(-10deg) rotateY(-180deg); animation: leaf-ans-3 3s linear infinite; } } } @keyframes leaf-ans-1 { 0%, 100% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(5deg) scale(1.1); } } @keyframes leaf-ans-2 { 0%, 100% { transform: rotateY(-180deg) rotate(5deg); } 50% { transform: rotateY(-180deg) rotate(0deg) scale(1.1); } } @keyframes leaf-ans-3 { 0%, 100% { transform: rotate(-10deg) rotateY(-180deg); } 50% { transform: rotate(-20deg) rotateY(-180deg); } } .grow-ans { animation: grow-ans 2s var(--d) backwards; } @keyframes grow-ans { 0% { transform: scale(0); opacity: 0; } } @keyframes light-ans { 0% { opacity: 0; transform: translateY(0vmin); } 25% { opacity: 1; transform: translateY(-5vmin) translateX(-2vmin); } 50% { opacity: 1; transform: translateY(-15vmin) translateX(2vmin); filter: blur(0.2vmin); } 75% { transform: translateY(-20vmin) translateX(-2vmin); filter: blur(0.2vmin); } 100% { transform: translateY(-30vmin); opacity: 0; filter: blur(1vmin); } } @keyframes moving-flower-1 { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } } @keyframes moving-flower-2 { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(14deg); } } @keyframes moving-flower-3 { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(-20deg) rotateY(-10deg); } } @keyframes blooming-leaf-right { 0% { transform-origin: left; transform: rotate(70deg) rotateY(30deg) scale(0); } } @keyframes blooming-leaf-left { 0% { transform-origin: right; transform: rotate(-70deg) rotateY(30deg) scale(0); } } @keyframes grow-flower-tree { 0% { height: 0; border-radius: 1vmin; } } @keyframes blooming-flower { 0% { transform: scale(0); } } @keyframes moving-grass { 0%, 100% { transform: rotate(-48deg) rotateY(40deg); } 50% { transform: rotate(-50deg) rotateY(40deg); } } @keyframes moving-grass--2 { 0%, 100% { transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg); } 50% { transform: scale(0.5) rotate(79deg) rotateX(10deg) rotateY(-200deg); } } .growing-grass { animation: growing-grass-ans 1s 2s backwards; } @keyframes growing-grass-ans { 0% { transform: scale(0); } } .not-loaded * { animation-play-state: paused !important; } Eu vi no tiktok um Vídeo de programação, onde aparece umas flores muito bonitas, é usado um arquivo .html um .js e um .css, eu procurei tutorias mas não achei, achei um Vídeo no youtube que da um link github, e ja entrega os arquivos mas ao executar, não aparece nada, vou deixar o link do Vídeo https://www.youtube.com/watch?v=ihAfDhTkMsQ, quem poder ajudar agradeço muito, e ja pra não esquecer eu não consegui instalar o ruby que aparece no Vídeo, provavelmente esta ai o erro, mas eu não sei como instalar o ruby.
  9. Henry007
    Boa tarde, poderia demonstrar um exemplo utilizando a biblioteca mpdf, no codigo que eu mostro?
  10. Henry007
    Boa tarde, eu estou fazendo um site de cadastro e visualização de pedidos, e eu quero colocar um botão que irá fazer o download de um arquivo pdf com todos os registros de pedidos, e eu não sei como fazer ele, vi alguns videos, mas quando direciona para a pagina de relatorio onde estão os pedidos, a pagina fica em branco e faz o download de um arquivo pdf, mas sem os registros, o que eu quero é que abra essa pagina, e o botão de download fica dentro dessa pagina, vou deixar o codigo do relatorio logo abaixo: <?php include_once('config.php'); // chama sessão para o usuario que fez login session_start(); // print_r($_SESSION); // caso user e login forem vazios, ele volta para login2 e encerra a sessão if((!isset($_SESSION['User']) == true) and (!isset($_SESSION['Pass']) == true)) { unset($_SESSION['User']); unset($_SESSION['Pass']); header('location:login2.php'); } // cria variavel logado, para informa o nome do usuario $logado = $_SESSION['User']; $sql = "SELECT * FROM pedidos"; $result = $conexao -> query($sql); ?> <!DOCTYPE html> <html lang ="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> REGISTRO DE PEDIDOS</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <style> body{ background-color: rgba(33,37,41,255); } h1{ color: white; text-align: center; } #trash:hover{ background-image: linear-gradient(to right, RGB(256, 0, 0), RGB(256, 0, 0)); } .bo{ position: relative; margin-bottom: 25px; text-align: left; } </style> </head> <body> <?php //cria legenda dizendo bem vindo ao usuario logado echo "<h1>Bem vindo, $logado!</h1>" ?> <!-- tabela com os pedidos --> <h1 ><b>Registro de Pedidos</b></h1> <!-- botões para voltar --> <a class="bo"href="sair.php">Sair</a> <br> <a class="bo"href="painel.php">Voltar</a> <div> <table class="table table-dark table-striped table-widht"> <thead> <tr> <th scope="col">#</th> <th scope="col">Cliente</th> <th scope="col">Telefone</th> <th scope="col">Tecido</th> <th scope="col">Gola</th> <th scope="col">Quantidade</th> <th scope="col">Tamanho</th> <th scope="col">Previsão de entrega</th> <th scope="col">Observação</th> <th scope="col">Preço</th> <th scope="col">Progresso</th> <th scope="col">...</th> </tr> </thead> <tbody> <?php while($user_data = mysqli_fetch_assoc($result)) { echo "<tr>"; echo "<td>".$user_data['ID']."</td>"; echo "<td>".$user_data['Cliente']."</td>"; echo "<td>".$user_data['Telefone']."</td>"; echo "<td>".$user_data['Tecido']."</td>"; echo "<td>".$user_data['Gola']."</td>"; echo "<td>".$user_data['Quantidade']."</td>"; echo "<td>".$user_data['Tamanho']."</td>"; echo "<td>".$user_data['Previsao']."</td>"; echo "<td>".$user_data['Obs']."</td>"; echo "<td>".$user_data['Preco']."</td>"; echo "<td>".$user_data['Progresso']."</td>"; // botões de ações da tabela echo "<td> <a class=' btn btn-sm btn-primary' href='editar.php?id=$user_data[ID]' title='Editar'> <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pencil-square' viewBox='0 0 16 16'> <path d='M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z'/> <path fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z'/> </svg> </a> </td>"; echo "<td> <a class=' btn btn-sm btn-primary' href='#?id=$user_data[ID]' title='ver modelo'> <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-image-fill' viewBox='0 0 16 16'> <path d='M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2V3zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12zm5-6.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0'/> </svg> </a> </td>"; echo "<td> <a id='trash' class=' btn btn-sm btn-primary' href='#?id=$user_data[ID]' title='E'> <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-trash' viewBox='0 0 16 16'> <path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z'/> <path d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'/> </svg> </a> </td>"; } ?> </tbody> </table> </div> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </body> </html>
  11. Henry007
    valeu cara me ajudou muito, muito obrigado!!
  12. Henry007
    Eu estou tentando criar um sistema de cadastro de pedidos de uma malharia, mas quando eu vou passar o valor da variavel da gola, da erro dizendo que ela não foi definida, sendo que as demais variaveis estão corretas deixarei o codigo abaixo: <?php if(isset($_POST['submit'])) { print_r($_POST['Cliente']); print_r('<br>'); print_r($_POST['Telefone']); print_r('<br>'); print_r($_POST['tecido']); print_r('<br>'); print_r($_POST['gola']); print_r('<br>'); print_r($_POST['Quantidade']); print_r('<br>'); print_r($_POST['Tamanho']); print_r('<br>'); print_r($_POST['Obs']); print_r('<br>'); print_r($_POST['Preco']); } ?> <!DOCTYPE html> <html lang ="pt"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Cadastro de Pedidos MLony</title> <style> body{ font-family:'Times New Roman', Times, serif; background-image: linear-gradient(to right, RGB(4, 154, 153), RGB(46, 41, 78)); } .box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.7); padding: 10px; border-radius: 20px; color: white; width: 25%; } fieldset{ border: 3px solid cyan; } legend{ border: 1px solid cyan; padding: 10px; text-align: center; background-color: cyan; border-radius: 7px; } .inputBox{ position: relative; } .inputUser{ background: none; border: none; border-bottom: 1px solid white; outline: none; color: white; font-size: 17px; width: 100%; letter-spacing: 2px; } .animacao{ position: absolute; top: 0px; left: 0px; pointer-events: none; transition: .5s; } .inputUser:focus ~ .animacao, .inputUser:valid ~ .animacao{ top: -20px; font-size:13px; color: cyan; } #submit{ background-image: linear-gradient(to right, RGB(4, 154, 153), RGB(46, 41, 78)); width: 100%; border: none; padding: 15px; color: white; font-size: 17px; cursor: pointer; border-radius: 10px; } #submit:hover{ background-image: linear-gradient(to right, RGB(4, 112, 112), RGB(24, 21, 45)); } </style> </head> <body> <div class="box"> <form action="formulario.php" method="post"> <fieldset> <legend><b>Cadastro de Pedido</b></legend> <br><br> <!-- Inicio do equerimento por texto--> <div class="inputBox"> <input type="text" name="Cliente" id="Cliente" class="inputUser" required> <label for="Cliente" class="animacao">Nome do Cliente</label> </div> <br><br> <!-- Fim do equerimento por texto--> <div class="inputBox"> <input type="tel" name="Telefone" id="Telefone" class="inputUser" required> <label for="Telefone" class="animacao">Telefone do Cliente</label> </div> <br><br> <!-- Inicio do requerimento de seleção--> <p>Tipo de Tecido</p> <form method="post"> <select name="tecido" id="tecido"> <option value="malha">Malha</option> <option value="algodão">Algodão</option> </select> </form> <br><br> <!-- Fim do requerimento de seleção--> <p>Tipo de Gola</p> <form method="post"> <select name="gola" id="gola"> <option value="gola">Gola em V</option> <option value="gola">Gola em U</option> </select> </form> <br><br> <div class="inputBox"> <input type="number" name="Quantidade" id="Quantidade" class="inputUser" required> <label for="Quantidade" class="animacao">Quantidade de peças</label> </div> <br><br> <div class="inputBox"> <input type="text" name="Tamanho" id="Tamanho" class="inputUser" required> <label for="Tamanho" class="animacao">Tamanho da peça</label> </div> <br><br> <!-- Inicio de requerimento de data--> <!-- Fim do requerimento de data--> <div class="inputBox"> <input type="text" name="Obs" id="Obs" class="inputUser"> <label for="Obs" class="animacao">Observação</label> </div> <br><br> <div class="inputBox"> <input type="number" name="Preco" id="Preco" class="inputUser" required> <label for="Preco" class="animacao">Preço Final</label> </div> <br> <input type="submit" name="submit" id="submit"> </fieldset> </form> </div> </body> </html>
  13. Henry007
    monta não é problema, o problema é as escolhas das peças porque eu vou ter que montar um setup inteiro com o meu orçamento um tanto que apertado, sendo que só poderei paga a vista abaixo de 1000 reais e que fica acima deve valor vou parcela e paga com o tempo, esse é o real problema.
  14. Henry007
    foi mal link errado olha ai as imagens
  15. Henry007
    mn tava pesquisando por ai e achei esse pc por 2.889 o que se acha dele? https://www.amazon.com.br/Gamer-OnGaming®-RadeonTM-Graphics-Gabinete/dp/B0B5RQ6DL6?keywords=Ryzen+5+5600g&qid=1666904005&qu=eyJxc2MiOiIyLjY1IiwicXNhIjoiMC43OCIsInFzcCI6IjAuMzMifQ%3D%3D&sprefix=Ryzen+5+,aps,192&sr=8-4&ufe=app_do:amzn1.fos.25548f35-0de7-44b3-b28e-0f56f3f96147&linkCode=sl1&tag=toptech04-20&linkId=cd1ef7a6feb9e60181476edaedc7d25c&language=pt_BR&ref_=as_li_ss_tl
  16. Henry007
    Bom dia galera esse ano irei comprar meu primeiro pc e tenho uma faixa de 4.000,00 eu montei um hardware até bom (pelo menos eu acho) e queria a opinião de vcs placa-mãe :Gigabyte b450M - amazon R$741,2 processador: AMD Ryzen 5 4600G - amazon R$776,0 memória RAM : 2x8 3200mhz - aliexpress R$238,46 SSD: SSD 1tb - aliexpress R$203,51 fonte: redragon rgps 500W - amazon R$317,55 gabinete: gabinete genérico com lateral de vidro - amazon R$148,9 cabos : cabo HDMI 2.1 - amazon R$45,17 monitor : TGT altay T3 - amazon R$859,9 pasta térmica : pasta térmica rise mode silver gold - amazon R$50,0 teclado : teclado mancer ghoul MK2 huano marron - amazon R$164,90 mouse: razer viper mini - amazon R$ 170,0 headset: mancer aura - amazon R$ 149,9 bom somando tudo isso da 4.000,04 (detalhe a amazon so coloca o frete quando for realiza a compra ent no carrinho o preço que aparece são esses ai)
  17. Henry007
    vega 7 do Ryzen 5 4600G, vi umas analises e pegou com resolução 1080, eu n vou usar muito provavelmente essa resolução geralmente eu estico a tela um pouco

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...

Ebook grátis: Aprenda a ler resistores e capacitores!

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!