FeedBurner FeedCount

Showing posts with label div. Show all posts
Showing posts with label div. Show all posts

Wednesday, December 18, 2013

How to rotate an image by rui santos



How to rotate an image by rui santos




1st do a simple html file with image;

<html>
    <head>
        <title>Rotate my Image</title>
        <link rel="stylesheet" type="text/css" href="rotate_style.css" />
    </head>
  
    <body>
        <img src="5.png" alt="myImage">
    </body>
</html>

Then: do the rotate_style.css

 img{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;

height: 450px;
width: 450px;

-webkit-transition-property: transform;
-moz-transition-property: transform;
transition-property: transform;
}
img:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
height: 900px;
width: 900px;
}

After this code. run index.html in your browser and hover the image. ENJOY! ^_^




rui santos

Tuesday, October 29, 2013

HOW TO MAKE A SIMPLE GAME IN PHP



In this tutorial, we will do the game 4pics 1 word. This game can be seen and played in your mobile. But now, you can also do this in php with just simple coding.

Step 1:

Let's create the file named index.php(You can name this code anything you like it can be game.php etc.)

1.1 html(we will use some image here. 'Let's find some pics that will be anwered as Electricity') :)

<html>
    <head>
        <title>
            PHP GAME
        </title>
      
        <style>
            #center_answer{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>4 PICS 1 WORD: PHP VERSION</h1>
      
        <div>
            <img alt="falls" src="falls.jpg" width="250" height="250">
            <img alt="windmill" src="windmill.jpg" width="250" height="250">
            </br>
            <img alt="lightning" src="lightning.jpg" width="250" height="250">
            <img alt="solar_panel" src="panel.jpg" width="250" height="250">
        </div>
      
        <form action="verify.php" method="post">
        <div><input type="text" name="answer" placeholder="Your Answer here..." id="center_answer" size="78"></div>
        <div><input type="submit" name="enter" value="Enter"></div>
        </form>
    </body>
</html>

2.) We will now verify if the answer is correct. if yes, it will say correct! and if not it will say wrong answer pls. try again or else Invalid answer/Pls Put your answer.

verify.php

<?php

if(isset($_POST["enter"])){
    if(($_POST["answer"])== null){
        echo "Please input your Answer.";
    }
    elseif($_POST["answer"]== "electricity"){
        echo "Correct!";
    }
    else{
        echo "Wrong/Invalid answer.";
    }
}
?>

3.) After this its up to you to create new set of pics :) Enjoy!

If you have some questions you can comment here and ill try to answer it :) thank you. Happy PHP coding.




LAYOUT USING DIV IN HTML + CSS

This is an example of making a layout. In this tutorial we will use <div>

Name: index.html

<html>
<head>
<title>CREATE YOUR OWN LAYOUT USING DIV</title>
<link rel="stylesheet" type="text/css" href="my_design.css"><!-- link to  my_design.css-->
</head>
<body>
<div id="myHeader"> <!-- This div is your header title -->
<h1 id="line">HTML, CSS, PHP tutorial</h1>
</div>

<div id="myMenu"><!-- This is your Menu -->

<a>HTML</a></br>
<a>CSS</a></br>
<a>PHP</a>

<div id="inner">
Inner information here
</div>

</div>

<div id="myFooter"><!-- lower part-->
<p>Here is your footer</p>
</div>
</body>
</html>

This code below is for the css of the page

CSS FILE: my_design.css

#myHeader{
background-color: green;
width: 600px;
padding: 1px;
color: white;
}
#line{
text-align: center;
}
#myMenu{
background-color: yellowgreen;
width: 80px;
height: 150px;
text-align: center;
color: white;
}
#myFooter{
background-color: green;
width: 600px;
height: 50px;
text-align: center;
padding: 1px;
color: white;
}
#inner{
color: green;
margin-left: 80px;
margin-top: -60px;
background-color: rgba(0,0,0,0.2);
width: 522px;
height: 150px;
text-align: left;
}

If this code helps you, please comment thank you :)