Hoş Geldin, Ziyaretçi!

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

Bira Animasyonlu Yapım Aşamasındayız Sayfası HTML Template

  • Konbuyu başlatan Impossible
  • Başlangıç tarihi
Impossible

Impossible

Tilki Adayı
Katılım
9 May 2022
Mesajlar
14
Ticaret: 0 / 0 / 0
5vLKh2SJ1.gif


Bira temalı javascript + css ve html ile kodlanmış yapım aşamasındayız sayfası! Tilki ailesine özel tamamen ücretsiz.


HTML:
<html>
<body>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat);@font-face{font-family:bebas_neueregular;src:url('https://dl.dropboxusercontent.com/u/81135676/bebasneue_regular-webfont.eot');src:url('https://dl.dropboxusercontent.com/u/81135676/bebasneue_regular-webfont.woff2') format('woff2'),url('https://dl.dropboxusercontent.com/u/81135676/bebasneue_regular-webfont.woff') format('woff'),url('https://dl.dropboxusercontent.com/u/81135676/bebasneue_regular-webfont.ttf') format('truetype'),url('https://dl.dropboxusercontent.com/u/81135676/bebasneue_regular-webfont.svg#bebas_neueregular') format('svg');font-weight:400;font-style:normal}@font-face{font-family:bebas_neuebold;src:url('https://dl.dropboxusercontent.com/u/81135676/bebasneue_bold-webfont.eot');src:url('https://dl.dropboxusercontent.com/u/81135676/bebasneue_bold-webfont.woff2') format('woff2'),url('https://dl.dropboxusercontent.com/u/81135676/bebasneue_bold-webfont.woff') format('woff'),url('https://dl.dropboxusercontent.com/u/81135676/bebasneue_bold-webfont.ttf') format('truetype'),url('https://dl.dropboxusercontent.com/u/81135676/bebasneue_bold-webfont.svg#bebas_neuebold') format('svg');font-weight:400;font-style:normal}"Arial",$font-bold: "bebas_neuebold",html{display:block;padding:0;margin:0;width:100%;position:relative;height:100%}body{font-family:$font-bold}section{position:relative;width:100%;height:100%;background:radial-gradient(circle,#fbb600,#da5900)}#beerCanvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100}.coming_content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;margin:0 auto;color:#fff;text-align:center;z-index:101;margin:0;letter-spacing:2px;text-align:center;color:#fff}.separator_container{width:100%;display:block;text-align:center;position:relative;@include clearfix();margin:12px 0}.separator{color:#fff;margin:0 auto 1em;width:11em}.line_separator{height:20px}&:after,&:before{display:block;width:40%;content:" ";margin-top:14px;border:1px solid #fff}&:before{float:left}&:after{float:right}
</style>
<script>
for(var canvas=document.getElementById("beerCanvas"),ctx=canvas.getContext("2d"),particles=[],particleCount=280,i=0;i<particleCount;i++)particles.push(new particle);function particle(){this.x=Math.random()*canvas.width,this.y=canvas.height+300*Math.random(),this.speed=1+Math.random(),this.radius=3*Math.random(),this.opacity=100*Math.random()/1e3}function loop(){requestAnimationFrame(loop),draw()}function draw(){ctx.clearRect(0,0,canvas.width,canvas.height),ctx.globalCompositeOperation="lighter";for(var t=0;t<particles.length;t++){var a=particles[t];ctx.beginPath(),ctx.fillStyle="rgba(255,255,255,"+a.opacity+")",ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!1),ctx.fill(),a.y-=a.speed,a.y<=-10&&(particles[t]=new particle)}}loop();
</script>
<section>
  <canvas id='beerCanvas'></canvas>
  <div class="coming_content">
    <h1>Yapım Aşamasında</h1>
    <div class="separator_container">
      <div class="separator line_separator">
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" width="320.864" height="320.864" viewBox="0 0 320.864 320.864"><path fill="#fff" d="M184.04 81.83c-1.89-5.1-3.46-28.63-3.926-55.05-.003-.1.107-.37.514-.37 2.092-.125 3.248-1.79 3.248-3.91V4c0-2.2-1.8-4-4-4H140.99c-2.2 0-4 1.8-4 4v18.5c0 2.123 1.06 3.77 3.152 3.89.673 0 .613.478.61.673-.463 26.677-2.035 49.67-3.925 54.77-11.12 29.993-35.884 27.39-35.884 63.393V273.96c0 49.536 24.92 47.044 59.49 46.82 34.57.224 59.49 2.716 59.49-46.82V145.226c0-36.002-24.764-33.4-35.883-63.394zm12.89 127.953c-5.845 8.89-31.005 30.02-36.458 30.02-5.338 0-30.727-21.21-36.532-30.02-2.907-4.41-4.97-9.277-4.627-15.678.605-11.325 9.866-20.678 21.208-20.678 11.66 0 18.45 12.44 19.915 12.44 1.675 0 8.755-12.44 19.914-12.44 11.34 0 20.6 9.353 21.206 20.678.342 6.4-1.713 11.247-4.627 15.678z"/></svg>
        </span>
      </div>
    </div>
    <h3>Birayı severim. Javascript ve HTML'i de tabii..</h3>
  </div>
</section>
    </body>
</html>