Ghostwriter

Thursday, June 4, 2020

Glowing border HTML +CSS [Source code available]

This is the login.hml and also create login.css

[SOURCE CODE]

just copy and paste

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="login.css">
    <link href='https://fonts.googleapis.com/css?family=Bungee Inline' rel='stylesheet'></head>
<body>
   <div class="block" id="changecolor">
       <h2>Log-In (^_^)</h2>
       <p>Please fill in your credential login.</p>
       <div class="wrapper">
           <!--action still need to connect for secure-->
           <form action="######" method="post">
               <div class="form-group"><!--need to connect php area-->
                   <label>Username</label>
                   <input type="text" name="username"  class="form-control" value="#####">
                   <span class="help-block"><!--php area--></span>
               </div>
               <div class="form-group"><!--need to connect php area-->
                <label>Password</label>
                <input type="password" name="password" class="form-control">
                <span class="help-block"><!--php area--></span>
            </div>
            <div class="form-group"></div>
                <input type="submit" class="btn" value="LOGIN">
            </div>
            <div class="sign"><p>Need account? <a href="Register.php">Sign up now!</a></p></div>


           </form>
       </div>
   </div>
   
</body>
</html>

body {

    margin: 0;
    padding: 0;
    background-image: linear-gradient(0deg, rgb(64, 6, 170), rgb(0, 0, 0));
    overflow: hidden;
    font-family: 'Bungee Inline';
    
}
.btn{
    background-color: rgb(24, 158, 4);
    position: relative;
    float: right;
    right: 43%;
    color: #025502;
    
}
.btn:hover{
    color: rgb(0, 255, 64);
}

.block h2{
    
    position: relative;
    text-align: center;
    color: rgb(255, 145, 0);
    padding-top: 20px;
    padding-left: 20px;
    font-size: 50px;
    font-weight: bolder;
    text-shadow: 5px 5px 5px rgb(255, 2, 141);
    

}
#changecolor h2{
    animation: changecolor 5s infinite;
}
@keyframes changecolor {
    from {color: rgb(21, 255, 0);}
    to {color: #ffff00;}
  }
.block p{
    color: rgb(18, 253, 18);
    padding-left: 20px;
    font-size: 20px;
    text-align: center;
    
}
label {
    font-size: 15px;
    right: 42%;
   float: right;
    position: relative;
    color: rgb(0, 255, 0);
    text-align: center;
}
.sign p{
    color: rgb(26, 243, 7);
    position: relative;
    
    text-align: center;
    padding: 40px;
    
}
.sign p a{
    text-decoration: none;
}
.sign p a:hover{
    color: #0000ff;
}
/*background area*/
.block {
    top: -160px;
    position: relative;
    margin: 300px auto 0;
    width: 40%;
    height: 500px;
    background: linear-gradient(0deg, #000, #292929);
}

.block:before, .block:after {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
        #0000ff, #00ff00,#ffff00, #ff0000);
    background-size: 400%;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: -1;
    animation: steam 20s linear infinite;
}

@keyframes steam {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}

.block:after {
    filter: blur(50px);
}
.wrapper{
    padding: 20px;
}

Monday, June 1, 2020

Basic SNAKE GAME using HTML and JAVASCRIPT code

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
  html, body {
    height: 100%;
    margin: 0;
  }
  body {
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  canvas {
    border: 1px solid white;
  }
  #p1
  {
    color:red;
	position:absolute;
	left:100px;
	top:10px;
  }
    #p2
  {
    color:red;
	position:absolute;
	left:100px;
	top:30px;
  }
  #score
  {
    color:yellow;
    position:absolute;
	left:155px;
	top:10px;
  }
  #high
  {
    color:yellow;
    position:absolute;
	left:195px;
	top:30px;
  }
  </style>
</head>
<body>
<p id="p1">SCORE:</p>
<p id="p2">HIGHSCORE:</p>
<p id="score"></p>
<p id="high"></p>
<canvas width="400" height="400" id="game"></canvas>
<script>
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
var grid = 16;
var count = 0;
var score=0;
var max=0;  

var snake = {
  x: 160,
  y: 160,
  
  // snake velocity. moves one grid length every frame in either the x or y direction
  dx: grid,
  dy: 0,
  
  // keep track of all grids the snake body occupies
  cells: [],
  
  // length of the snake. grows when eating an apple
  maxCells: 4
};
var apple = {
  x: 320,
  y: 320
};

// get random whole numbers in a specific range
// @see https://stackoverflow.com/a/1527820/2124254
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
// game loop
function loop() {
  requestAnimationFrame(loop);
  // slow game loop to 15 fps instead of 60 (60/15 = 4)
  if (++count < 4) {
    return;
  }
  count = 0;
  context.clearRect(0,0,canvas.width,canvas.height);
  // move snake by it's velocity
  snake.x += snake.dx;
  snake.y += snake.dy;
  // wrap snake position horizontally on edge of screen
  if (snake.x < 0) {
    snake.x = canvas.width - grid;
  }
  else if (snake.x >= canvas.width) {
    snake.x = 0;
  }
  
  // wrap snake position vertically on edge of screen
  if (snake.y < 0) {
    snake.y = canvas.height - grid;
  }
  else if (snake.y >= canvas.height) {
    snake.y = 0;
  }
  // keep track of where snake has been. front of the array is always the head
  snake.cells.unshift({x: snake.x, y: snake.y});
  // remove cells as we move away from them
  if (snake.cells.length > snake.maxCells) {
    snake.cells.pop();
  }
  // draw apple
  context.fillStyle = 'red';
  context.fillRect(apple.x, apple.y, grid-1, grid-1);
  // draw snake one cell at a time
  context.fillStyle = 'green';
  snake.cells.forEach(function(cell, index) {
    
    // drawing 1 px smaller than the grid creates a grid effect in the snake body so you can see how long it is
    context.fillRect(cell.x, cell.y, grid-1, grid-1);  
    // snake ate apple
    if (cell.x === apple.x && cell.y === apple.y) {
      snake.maxCells++;
	  score+=10;
	  //max=score;
	  document.getElementById('score').innerHTML=score;
	
      // canvas is 400x400 which is 25x25 grids 
      apple.x = getRandomInt(0, 25) * grid;
      apple.y = getRandomInt(0, 25) * grid;
    }
    // check collision with all cells after this one (modified bubble sort)
    for (var i = index + 1; i < snake.cells.length; i++)
	{
      
      // snake occupies same space as a body part. reset game
      if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) 
	 { 
	 
	    if(score>max)
	    {
	     max=score;
	    }
    	snake.x = 160;
        snake.y = 160;
        snake.cells = [];
        snake.maxCells = 4;
        snake.dx = grid;
        snake.dy = 0;
		score=0;
        apple.x = getRandomInt(0, 25) * grid;
        apple.y = getRandomInt(0, 25) * grid;
	    document.getElementById('high').innerHTML=max;
      }
    }
  }
  
  );
  
}
// listen to keyboard events to move the snake
document.addEventListener('keydown', function(e) {
  // prevent snake from backtracking on itself by checking that it's 
  // not already moving on the same axis (pressing left while moving
  // left won't do anything, and pressing right while moving left
  // shouldn't let you collide with your own body)
  
  // left arrow key
  if (e.which === 37 && snake.dx === 0) {
    snake.dx = -grid;
    snake.dy = 0;
  }
  // up arrow key
  else if (e.which === 38 && snake.dy === 0) {
    snake.dy = -grid;
    snake.dx = 0;
  }
  // right arrow key
  else if (e.which === 39 && snake.dx === 0) {
    snake.dx = grid;
    snake.dy = 0;
  }
  // down arrow key
  else if (e.which === 40 && snake.dy === 0) {
    snake.dy = grid;
    snake.dx = 0;
  }
});
// start the game
requestAnimationFrame(loop);
</script>
</body>
</html>

Monday, May 25, 2020

Valid types!

<!DOCTYPE>

*It should always include in the top of <html> tag.

*Defines the version you are using in a document.

Valid <!DOCTYPE>

<!doctype html>

<!dOctype html>

<!Doctype html>

Friday, May 22, 2020

Basic HTML tags and Definition.

HTML tags - is a mark up language and makes use of various tags to format the content.
these tags are enclosed within angle braces <TAG NAME> . Except few tags, most of the tags have their corresponding closing tags. For example <html> has its closing tag </html> and body tag has its closing tag </body> tag etc.

Tags/Description

<!DOCTYPE ...> this tag defines a document type and HTML version.
<html> this tag in-closes the complete HTML document and mainly comprises of document header which is represented by <head>..</head> and document body which is represented by <body>..</body> tags.
<head> this tag represents the document's header which can keep other HTML tags like <title>,<link> etc.
<body> This tag represents the document's body which keeps other tags like <h1>, <div>, <p> etc.
<h1> Represents the heading.
<p> Represents a paragraph.

what is HTML in progamming?

HTML stands for Hyper Text Markup Language, it is also the most widely used language in terms of making websites.

Hypertext refers to the way in which web pages (HTML DOCUMENTS) are linked together. thus, link available on a web page is called Hypertext.
HTML is a markup language witch means you use html to simply "mark-up" a text document with tags that tell web browser how to structure it to display.

Ghostwriter

Featured Post

Glowing border HTML +CSS [Source code available]

Thursday, June 4, 2020

Glowing border HTML +CSS [Source code available]

This is the login.hml and also create login.css

Monday, June 1, 2020

Basic SNAKE GAME using HTML and JAVASCRIPT code

Monday, May 25, 2020

Valid types!

Friday, May 22, 2020

Basic HTML tags and Definition.

Tags/Description

what is HTML in progamming?

Followers