Posts

text animation fancy text js part

  const   text  =  document . querySelector ( ".fancy" ); const   strText  =  text . textContent ; const   spiltText  =  strText . split ( "" ); Text . textContent  =  "" ; for  ( let   i  =  0 ;  i < spiltText . length ;  i ++){      Text . innerHtml  + = "<span>"  + spiltText  [ i ] +  "</span>" ; } let   char  =  0 ; let   timer  =  setInterval ( onTick , 50 ); function   onTick (){      const   span  =  text . querySelectorAll ( 'span' )[ char ];      span . classList . add ( '.fade' );      char ++;      if  ( char  ===  spiltText . length ){          complete ();          return ;     } }...

text animation fancy text css part

  *  {    margin :  0 ;    padding :  0 ;    box-sizing :  border-box ; } body  {    background :  black ; } h1  {    color :  white ;    font-size :  4rem ;    font-family :  sans-serif ;    text-align :  center ;    line-height :  100vh ; } span  {    opacity :  0 ;    transition :  all   0.5s   ease ;    transform :  translateY ( 50px );    display :  inline-block ; } span.fade  {    opacity :  1 ;    color : ; }

Logo css part Bairati College

  body  {    margin :  0 ;    padding :  0 ;    box-sizing :  border-box ;    background :  rgb ( 1 ,  1 ,  34 );    background-size :  cover ; } .center  {    position :  absolute ;    top :  50% ;    left :  50% ;    transform :  translate ( -50% ,  -50% );    width :  200px ;    height :  200px ;    box-sizing :  border-box ;    border :  15px   solid   rgba ( 0 ,  0 ,  0 ,  8 );    border-radius :  50% ; } .circle1  {    width :  100% ;    height :  100% ;    border-radius :  50% ;    border-style :  solid ;    border-width :  5px ;    border-color :  #1fc40f   #e74c3c   #9b59b6   #2ecc71 ;    box-sizing ...

My First Logo For Bairati College logo-html

  <! DOCTYPE   html > < html   lang = "en" >    < head >      <!-- Required meta tags -->      < meta   charset = "utf-8"   />      < meta   name = "viewport"   content = "width=device-width, initial-scale=1"   />      <!-- Bootstrap CSS -->      < link   rel = "stylesheet"   type = "text/css"   href = "style.css"   />      < title > logo </ title >    </ head >    < body >      < div   class = "center" >        < div   class = "circle1" ></ div >        < div   class = "circle2" ></ div >        < div   class ...