Thursday 15 September 2016

Android Tutorial #3 (Code explanation for Hello World - Android)


Android



This tutorial contains a detailed explanation of the Hello World application created in Android Tutorial #1.

MainActivity.java

package com.computerscience101.testmap;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}
package com.computerscience101.testmap;
 A 'package' in Java is used to organise classes in Java in a particular namespace, similar to how we arrange similar files in a folder.
package <package-name> denotes which package the file belongs to.


import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

The 'import' keyword in Java is used to import (include from external source) built-in and user-defined packages into your Java class. This allows you to access classes and methods from imported packages as if they are defined in the current package

Access specifiers: Access specifiers as its name suggests determine how a particular entity can be accessed i.e. whether it can be accessed from all classes, only the class to which the variable belongs, etc.
In this case an 'entity' could be a class, method, variable. etc.

In Java there are 4 types of access specifiers :
1. public
Can be accessed by all classes in the program, whether they are in the same package or in different packages.

2. private
Can be accessed only by the enclosing class.

3. protected
Entities made protected in super class can be accessed only from sub class. Super classes and subclasses can be better understood after understanding the concept of inheritence will be covered in the next part.

4. default
Java provides a default access specifier when no access specifier is specified. Entities with default access specifier can only be accessed by classes in the same package.

public class MainActivity extends AppCompatActivity { 


Inheritance
Inheritance is the process by which one class gets the methods and properties (variables) of another class.
In this situation the receiving class is called the 'sub class' where as the class who's methods and variables will be acquired by the 'sub class' is called the 'super class'.
In Java the keyword 'extends' is used to show inheritence.

For eg.
Sub class extends super class {

The class MainActivity represents an Activity and hence it must contain the necessary methods and variables required by an Activity.
AppCompatActivity internally extends the Activity class.
Hence MainActivity acquires the methods and variables of the AppCompatActivity class which include the methods and variables of the Activity class.
AppCompatActivity is used since it allows you to set an ActionBar and a theme for the Activity.


@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}
Overriding is a feature of OOP which is related to runtime-polymorphism. Polymorphism on a very simplistic level means the same name for many entities.
In this particular case polymorphism refers to methods. We override methods of the super class in the sub class by using the annotation @Override Which method is to be used depends upon the Object used for the class. The method in the sub class should have the same signature as that of the super class.

The signature of a method consists of:
Method Name + parameters

onCreate()
The onCreate() method is used to initialise the Activity. It comes first in the lifecycle of an Activity. Hence when an Activity is created first the onCreate() method is called.
super.onCreate() calls the onCreate() method of the super class.

onCreateOptionsMenu()
The onCreateOptionsMenu() method is used to initialise the contents of the Activity's standard options menu.





As shown above the options menu is enclosed within the red box.
The getMenuInflater().inflate(R.menu.menu_main); method is used to inflate the options menu.
This method returns true if the list is successfully inflated.
The file menu_main.xml contains the list of items to be inflated.



onOptionsItemSelected()
The onOptionsItemSelected() method is used to define what happens when each of the elements in the menu list is clicked.

Thursday 8 September 2016

Android Tutorial #2 (Basic components of Android)



Android

This tutorial helps you understand in depth the basic components of an Android application.

Components


1. Java files

Java is a programming language and computing platform first released by Sun Microsystems in 1995.
The Java files contain pieces of code that define how the Android application will react to events at run-time.
The Java files put life into the basic skeleton provided by the layouts allowing the user to interact with the Android application.

App components are the building blocks of an Android application. The system can enter the application from each component, however not all components are user entry points. Each component exists on its own and performs a specific task. Hence basically an Android application is a collection of one or more App components interacting with each other in order to perform specific functions.
There are four type of App components :

A. Activity

The Activity class in Android represents a single screen. Every Java program starts execution from the main function, similarly an Activity starts execution from the onCreate() method. The lifecycle of an Activity is as given below



B. Service 

A service is a component that runs in the background to perform long-running operations or to perform work for remote processes. A service does not provide a user interface.
There are two types of services :
    1. Bounded Service
An application component can bind a service by calling bindService(), such a service offers a client-server interface that allows components to interact with the service, send requests, get results and even supports Inter Process Communication (IPC). The service is bound to the application component that started it and dies when the corresponding application component dies.

    2. Unbounded Service
An unbounded service is started when an application component, such as an activity starts it by calling startService(). Once started a service can run in the background indefinitely, even if the component that started it is destroyed.

Lifecycle of a service is given below.


C. Content Providers

A Content Provider manages a shared set of app data. Data can be stored in the file system, an SQLite database, on the web or any other persistent storage location the application can access. Content providers are useful for reading and writing data that is private to your app and not shared. It is implemented as a subclass of ContentProvider.


D. Broadcast Receivers

It responds to a system-wide broadcast announcements, these include broadcasts announcing that the battery is low, screen is turned off, etc. The application can also initiate custom broadcasts. Broadcast Receivers don't create a user interface, they may create a status bar notification. A broadcast receiver can be thought of as a gateway to other components and is intended to do a minimal amount of work.

2. Resource files

Resource files are present in the resource folder. They form the skeleton of the Android application. This resource folder consists of various subfolders such as

A. drawable


The drawable folder consists of all the drawable files in the Android application.
In order to optimise the UI for different screen sizes the drawables need to be used
according to screen size. To do this we use the following folders
1. drawable-ldpi 
2. drawable-mdpi
3. drawable-hdpi
4. drawable-xhdpi
5. drawable-xxhdpi

LDPI, MDPI, HDPI, XHDPI, XXHDPI refers to screen density, which means how
many pixels can fit in once inch.
The ratio in pixels between them is
1. ldpi - 1:0.75 (low dot per inch)
2. mdpi - 1:1 (medium dot per inch)
3. hdpi - 1:1.5 (high dot per inch)
4. xhdpi - 1:2 (extra high dot per inch)
5. xxhdpi - 1:3 (extra extra high dot per inch.


B. layout

The layout folder contains layout files (.xml extension) that basically define the structure of the UI of the android application. The layouts form the skeleton of the Android application which is given life by the Java files. The layout file consists of views, these views are called the children of the layout. 
The View object is the basic building block of the UI which is created from the View Class and it occupies a rectangular area the screen and is responsible for drawing and event handling. The base class for widgets is View, and these widgets are used to create interactive UI components like buttons, text fields, etc.
There are five standard layouts :
    1. Linear Layout :
Arranges it's children in a single column or row. The orientation of the row can be set using the orientation attribute.

    2. Relative Layout :
Displays the child views in relative positions. The position of each child can be specified as relative to a sibling view.

    3. Frame Layout :
Used to block out an area on the screen to display a single item. Child views are drawn in stack with the most recent views drawn on top. This can be used to draw multiple views overlapping each other.

    4. Absolute Layout :
It allows you to specify exact locations of it's children using x, y co-ordinates.


    5. Table Layout :
Allows you to arrange groups of views in rows and columns.


C. menu

It consists of Menu Resource files. A Menu Resource file is a .xml file which defines an application menu such as an Options menu, Context menu, submenu that can be inflated
using MenuInflator.


D. mipmap

The Mipmap folder is used to place application/ launch icons. Similar to the drawables folder they have different subfolders mipmap-ldpi, mipmap-mdpi, mipmap-hdpi, etc. for different screen resolutions. 


E. values


The values folder contains various constant values that you keep using through the course of the application. For example it may contain constant strings.xml file which stores constant strings that are used throughout the program. It provides a single point of access to values that may be used from different parts of the application avoiding the creation of multiple variables. To retrieve string from strings.xml we can use "R.string.string_name". Similarly we can have a dimens.xml file which allows us to associate names with various dimension values.
The values folder may have different subfolders for different screen resolutions.


Wednesday 7 September 2016

Android Tutorial #1

Android

Android is a mobile Operating System (OS) developed by Google and it's based on the Linux Kernel. It's designed mainly for touchscreen phones. It is an open source initiative and the Android source code is released by Google under the Open Source licences.

Components

So at a very abstract level developing Android applications consists of two components :
1) Resource files.
2) Java files.

1.Resource Files

Resource files are stored under the res directory and can be considered as the skeleton of the Android application.

2.Java Files

Java files are stored in the java directory and are used to add life to the Android application and make it respond to dynamic events.


Other than this broad categorisation there are other types of files which will be explained in the coming parts.


Example

Without spending more time on the nitty gritty's lets begin writing your first Android application.

Since Android has stopped support for Eclipse I urge you to use Android Studio and this tutorial will contain screenshots of projects in Android studio.


After installing Android Studio and setting up your SDK, start Android Studio.



 Click on the "Start a new Android Studio project " option under "Quick Start".


Fill up the field "Application name" with something suitable.
"Company Domain" should be the web domain name of your company so that it is unique, however it is not necessary for the domain to exists. The "Package name" depends on the "Company Domain" you provide which in turn is used to name your package and while uploading your .apk file to the Google Playstore. So as of now you needn't worry about it.

After filling up the data suitably click "Next".


Check the "Phone and Tablet" checkbox since we are going to develop and Android application for a phone/tablet in this tutorial.

The other check boxes need to be checked when developing applications for the respective devices as suggested in the name. Wear for watches, TV for televisions, etc.

 Depending on the SDK you have downloaded set up the "Minimum SDK"."The Minimum SDK" means that the application we are building will work only on devices running at least this version of Android.

Click the next button after filling up all the details.


Activity
An Activity is an application component that provides a screen with which users can interact in order to do something , such as dial the phone, take a photo, send an email, or view a map. Each activity is given a window in which to draw its user interface. The window typically fills the screen, but may be smaller than the screen and float on top of other windows.

Android Studio allows us to chose from a set of Activity templates. We will choose the "Blank Activity" for now and we will use the other templates in further tutorials.

Click the "Next" button after choosing the "Blank Activity".


Usually most Android applications begin with an Activity called "MainActivity". This name can be changed. For the purpose of maintaining uniformity it will be kept as "MainActivity" in this example.
Each Activity has a Layout file (XML Layout) associated with it.
The field "Layout Name" denotes the name of the XML Layout associated with this Activity. 
As the complexity of your program increases and more complex components are added it becomes difficult to maintain the code, hence the prefix "activity" is added before the layout name. It is not compulsory but it is recommended.
The field "Menu Resource Name" contains the name of an XML Resource file. This file contains a number of constants which are used to populate and Options Menu, Context Menu, submenu, etc.
These constants cane be referenced from the Java files.

Click "Finish" to create your First Android project.






Connect an Android device to your computer. As you connect the device you will get a pop-up asking you to enable "USB Debugging". Enable USB Debugging on your device.
Click the Green Play button which is within the red circle in the previous screenshot.
If you do not have an android device you can create an Android Virtual Device by clicking on AVD which is within the blue circle in the previous screenshot.
Click here to learn how to create your Android Virtual Device.

Congratulations!!

You successfully created your first Android Application.
The next tutorial will contain a detailed analysis of the code explaining key concepts. 
Until then
DREAM OF CODE.

Create Android Virtual Device

Create your Android Virtual Device 

Click on the AVD Manager button within the blue circle and follow the screenshots.













Click ok to launch your application using Emulator.
Thank you.

DREAM OF CODE.






Sunday 20 March 2016

Revignite: Ignite the Revolution


For those of you who would like to have constructive conversations with like minded people on topics ranging from current affairs to leisurely topics like music as well as business ideas, placement policies in colleges, etc; this is definitely the platform to assist you in doing so. The Developer sincerely believes that to make a difference today, all you need to do is ignite the revolution. One spark is all it takes.


Revignite is the ultimate platform for you to get your thoughts out there. It is the next step in anonymous social media.
Revignite allows you to share your ideas and views in an unrestricted and anonymous fashion. Revignite aims at providing people with a platform on which they can share their views on a topic anonymously and the most interesting feature here is that these revolutions themselves are created by the people.
Users can begin their own revolution or join existing revolutions.
Ignite a revolution you would like to talk about to make it trending.
Revignite creates new chatrooms based on revolutions ignited by users.

Friday 6 November 2015

CSS animation for Venn Diagram representation


<html >
<head>
<style>
.Lower_layer {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.Upper_layer {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}
    body{background-color: white;}
    .circle-container {
        position: relative;
        background-color:blue;
        width: 35vw;
        height: 35vw;
        padding: 0;
        border-radius: 50%;
        list-style: none;
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        margin: 13vw auto 0;
        transition: 0.5s all;
        transition-delay:0.5s;
    }
    .circle-container:hover{
        background-color:red;
        transition: 0.5s all;
        position: relative;
        width: 12vw;
        height: 12vw;
        padding: 0;
        border-radius: 50%;
        list-style: none;
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }

    .circle-container > * {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 6vw;
        height: 6vw;
        margin: -4.1vw;
    }
    .circle-container > *:nth-of-type(1) {

    }
    .circle-container > *:nth-of-type(2) {
      }
    .circle-container > *:nth-of-type(3) {
       }
    .circle-container > *:nth-of-type(4) {
         }
    .circle-container > *:nth-of-type(5) {
        }
    .circle-container > *:nth-of-type(6) {
         }
    .circle-container > *:nth-of-type(7) {
         }
    .circle-container > *:nth-of-type(8) {

    }
    .circle-container a {
        display: block;
        text-align: center;
        color:black;
        text-decoration: none;
        border-radius: 50%;
        position:absolute;
        display:block;
        margin: auto;
        height:8vw;
        width:8vw;
        border-radius:50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        background-color:orange;
       
    }
    .circle-container a:hover{
       
        background-color:red;
        -webkit-animation: fly4 0.5s 0s ease both;
        animation: fly4 .5s 0s ease both;
    }

 @keyframes fly4 {
    from {
        transform: rotate3d(0,00,0,1080deg);
    }
}
@-webkit-keyframes fly4 {
    from {
        -webkit-transform:rotate3d(0,000,0,0deg);
    }
}
</style>
<script>
    $('.circle-container').children().each(function() {
        $(this).addClass('item'+($(this).index() + 1));
    });
</script>

</head>
<body >
<div id="Venn">
<ul class='circle-container' >
    <div style="position:absolute;margin-top:-1.75vw;margin-left:-3.75vw;font-size:2vw;text-align:center;vertical-align:middle;
    ">Full(100%)</div>

    <li style=" font-size:1vw;
"><a style="height:10vw;width:10vw;
        line-height:10vw;
 -moz-transform: rotate(0deg) translate(11vw) ;
        -ms-transform: rotate(0deg) translate(11vw) ;
        -webkit-transform: rotate(0deg) translate(11vw) ;
        transform: rotate(0deg) translate(11vw);
        "
          href = "javascript:void(0)" onclick = "myfuncstart1();" >Item1(24%)</a></li>



    <li style="font-size:1vw"><a style="height:5vw;
    width:5vw;
line-height:5vw;
      -moz-transform: rotate(45deg) translate(14.5vw) rotate(-45deg);
        -ms-transform: rotate(45deg) translate(14.5vw) rotate(-45deg);
        -webkit-transform: rotate(45deg) translate(14.5vw) rotate(-45deg);
        transform: rotate(45deg) translate(14.5vw) rotate(-45deg);"
         href = "javascript:void(0)" onclick = "myfuncstart2();">Item2(10%)</a></li>


    <li style="font-size:1vw"><a   style="height:8vw;width:8vw;
    line-height:8vw;
  -moz-transform: rotate(90deg) translateX(13vw) rotate(-90deg);
        -ms-transform: rotate(90deg) translateX(13vw) rotate(-90deg);
        -webkit-transform: rotate(90deg) translateX(13vw) rotate(-90deg);
        transform: rotate(90deg) translateX(13vw) rotate(-90deg);"
         href = "javascript:void(0)" onclick = "myfuncstart3();">Item3(12%)</a></li>


    <li style="font-size:1vw"><a style="
height:8vw;width:8vw;line-height:8vw;
    -moz-transform: rotate(135deg) translate(12.5vw) rotate(-135deg);
        -ms-transform: rotate(135deg) translate(12.5vw) rotate(-135deg);
        -webkit-transform: rotate(135deg) translate(12.5vw) rotate(-135deg);
        transform: rotate(135deg) translate(12.5vw) rotate(-135deg);"
        href = "javascript:void(0)" onclick = "myfuncstart4();">Item4(12%)</a></li>


    <li style="font-size:1vw"><a style="
height:7vw;width:7vw;
    line-height:7vw;
      -moz-transform: rotate(180deg) translate(12.5vw) rotate(-180deg);
        -ms-transform: rotate(180deg) translate(12.5vw) rotate(-180deg);
        -webkit-transform: rotate(180deg) translate(12.5vw) rotate(-180deg);
        transform: rotate(180deg) translate(12.5vw) rotate(-180deg);"
         href = "javascript:void(0)" onclick = "myfuncstart5();" >Item5(11%)</a></li>


    <li style="font-size:1vw"><a style="
    line-height:5vw;
    height:5vw;width:5vw;
     -moz-transform: rotate(225deg) translate(9.5vw) rotate(-225deg);
        -ms-transform: rotate(225deg) translate(9.5vw) rotate(-225deg);
        -webkit-transform: rotate(225deg) translate(9.5vw) rotate(-225deg);
        transform: rotate(225deg) translate(9.5vw) rotate(-225deg);"
         href = "javascript:void(0)" onclick = "myfuncstart6();">Item6(10%)</a></li>
    <li style="font-size:1vw">
        <a style="
        height:5vw;width:5vw;
        line-height:5vw;
        -moz-transform: rotate(270deg) translate(9vw) rotate(-270deg);
        -ms-transform: rotate(270deg) translate(9vw) rotate(-270deg);
        -webkit-transform: rotate(270deg) translate(9vw) rotate(-270deg);
        transform: rotate(270deg) translate(9vw) rotate(-270deg);"
        href = "javascript:void(0)" onclick = "myfuncstart7();" >Item7(10%)</a></li>
    <li style="font-size:1vw">

        <a style="
            height:6vw;width:6vw;
            line-height:6vw;
           -moz-transform: rotate(315deg) translate(12vw) rotate(-315deg);
           -ms-transform: rotate(315deg) translate(12vw) rotate(-315deg);
           -webkit-transform: rotate(315deg) translate(12vw) rotate(-315deg);
           transform: rotate(315deg) translate(12vw) rotate(-315deg);"
          href = "javascript:void(0)" onclick = "myfuncstart8();" >Item8(11%)</a></li>

</ul>
</div>


<!--For the pop ups */ -->


<div id="1" class="Upper_layer">

    <script >

        function myfuncstart1(){

            document.getElementById('1').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item1</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('1').style.display='none';document.getElementById('fade').style.display='none'">
       <center> Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>
<div id="2" class="Upper_layer">
    <script id="field">
        {
            var options = {};
            $('#field').datepicker(options).focus();

        }
        function myfuncstart2(){

            document.getElementById('2').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item2</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('2').style.display='none';document.getElementById('fade').style.display='none'">
        <center>Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="3" class="Upper_layer">
    <script id="field">
        {
            var options = {};
            $('#field').datepicker(options).focus();

        }
        function myfuncstart3(){

            document.getElementById('3').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item3</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('3').style.display='none';document.getElementById('fade').style.display='none'">
        <center>Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="4" class="Upper_layer">
    <script id="field">
        {
            var options = {};
            $('#field').datepicker(options).focus();

        }
        function myfuncstart4(){

            document.getElementById('4').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item4</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('4').style.display='none';document.getElementById('fade').style.display='none'">
        <center>Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="5" class="Upper_layer">
    <script id="field">
        {
            var options = {};
            $('#field').datepicker(options).focus();

        }
        function myfuncstart5(){

            document.getElementById('5').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item5</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('5').style.display='none';document.getElementById('fade').style.display='none'">
       <center> Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="6" class="Upper_layer">
    <script id="field">
        {
            var options = {};
            $('#field').datepicker(options).focus();

        }
        function myfuncstart6(){

            document.getElementById('6').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item6</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('6').style.display='none';document.getElementById('fade').style.display='none'">
       <center> Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="7" class="Upper_layer">
    <script id="field">
        {
            var options = {};
            $('#field').datepicker(options).focus();

        }
        function myfuncstart7(){

            document.getElementById('7').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item7</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('7').style.display='none';document.getElementById('fade').style.display='none'">
       <center> Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="8" class="Upper_layer">
    <script id="field">
        {
            var options = {};
            $('#field').datepicker(options).focus();

        }
        function myfuncstart8(){

            document.getElementById('8').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item8</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('8').style.display='none';document.getElementById('fade').style.display='none'">
        <center>Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>

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

Thursday 5 November 2015

Sample Newspaper website template 2.0 (Using amazing 3D animations)



<html>
    <head>
        <style>

 body{
    background-color: #00bcd4;
 }


    .card{
        float:left;
        width: 10%;
        height:10%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px black;
        background: white;
        border-radius: 5px;
        text-align:center;
         -webkit-animation: fly4 2s 0s both;
        animation: fly4 2s 0s ease both;
    }
     .card:hover {
        cursor: pointer;
        float:left;
        width: 10%;
        height:10%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px black;
        background: red;
        border-radius: 5px;
        text-align:center;
        animation:show 1s 0s ease both;
        -webkit-animation:show 0.125s 0s ease both;
    }
     .card1{
        float:right;
        width: 10%;
        height:10%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px black;
        background: white;
        border-radius: 5px;
        text-align:center;
         -webkit-animation: fly4 2s 0s both;
        animation: fly4 2s 0s ease both;
    }
   
     .card1:hover {
        cursor: pointer;
        float:right;
        width: 10%;
        height:10%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px black;
        background: red;
        border-radius: 5px;
        text-align:center;
         animation:show 1s 0s ease both;
        -webkit-animation:show 0.125s 0s ease both;
    }
    .card2{
        float:left;
        width: 30%;
        height:10%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px black;
        background: white;
        border-radius: 5px;
        -webkit-animation: fly 1s 1s both;
        animation: fly 1s 1s ease both;
        text-align:center;
    }
    
     .card3{
        text-align:center;
        float:left;
        width: 10%;
        height:10%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px black;
        background: white;
        border-radius: 5px;
         -webkit-animation: fly4 1s 1s both;
        animation: fly4 1s 1s ease both;
    }
.card3{
    cursor: pointer;
}
.card4{
        float:left;
        width: 45%;
        height:60%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px black;
        background: white;
        border-radius: 5px;
        -webkit-animation: fly5 1.5s 1.5s  both;
        animation: fly5 1.5s 1.5s  ease both;
        text-align:center;
    }
a{
    text-decoration:none;
    text-color:black;
    color:black;
}
@keyframes fly {
    from {
        
        transform: translateY(80em) rotate(-1620deg) scale(2,5);
        opacity:0;
    }
}

@-webkit-keyframes fly {
    from {
        
        -webkit-transform: translateY(80em) rotate(-1620deg) scale(2,5);
        opacity:0;
    }
}

 @keyframes fly1 {
    from {
        
        transform:translateX(150vw) translateY(80em) rotate(-1620deg) scale(2,5);
        opacity:0;
    }
}

@-webkit-keyframes fly1 {
    from {
        
        -webkit-transform:translateX(150vw) translateY(80em) rotate(-1620deg) scale(2,5);
        opacity:0;
    }
}
 @keyframes fly2 {
    from {
        
        transform:translateX(-150vw) translateY(80em) rotate(-1620deg) scale(2,5);
        opacity:0;
    }
}

@-webkit-keyframes fly2 {
    from {
        
        -webkit-transform:translateX(-150vw) translateY(80em) rotate(-1620deg) scale(2,5);
        opacity:0;
    }
}
 @keyframes fly3 {
    from {
        transform-origin:50% 50%;
        transform: translateY(80em) rotate3d(0,100,0,1080deg) scale(2,5);
        opacity:0;
    }
}

@-webkit-keyframes fly3 {
    from {
        -webkit-transform-origin:50% 50%;   
        -webkit-transform:translateY(80em) rotate3d(0,100,0,1080deg) scale(2,5);
        opacity:0;
    }
}

 @keyframes fly4 {
    from {
        
        transform: rotate3d(200,100,100,1080deg) scale(2,5);;
        
        opacity:0;
    }
}

@-webkit-keyframes fly4 {
    from {
           
        -webkit-transform:rotate3d(200,100,100,1080deg) scale(2,5);
        opacity:0;
    }
}

 @keyframes fly5 {
    from {
        transform-origin:50% 50%;
        transform: translateY(80em) rotate3d(0,100,0,1080deg);
        opacity:0;
    }
}

@-webkit-keyframes fly5 {
    from {
        -webkit-transform-origin:50% 50%;   
        -webkit-transform:translateY(80em) rotate3d(0,100,0,1080deg) scale(5,10);
        opacity:0;
    }
}
</style>
    </head>
    <body>
            <section  style="clear:both">
            <a href="#"><div class="card">
            <Strong>Sports</Strong>
            </div></a>
            <a href="#">
            <div class="card3" style="-webkit-animation: fly1 1.5s 1s ease both;
                                        animation: fly1 1.5s 1s ease both;
                                         margin-left:7%;  ">
            <Strong>Prev Article</Strong>
            </div>
            <div class="card2">
            <Strong>Current Article</Strong>
            </div>
            <a href="#">
            <div class="card3" style="  -webkit-animation: fly2 1.5s 1s ease both;
                                        animation: fly2 1.5s 1s ease both;">
            <Strong>Next Article</Strong>
            </div>
            </a>
            <a href="#">
            <div class="card1" >
            <Strong>Asia</Strong>
            </div>
            </a>
            </section>

            <section style="clear:both">
            <a href="#">
            <div class="card">
            <Strong>Politics</Strong>
            </div>
            </a>
            <div class="card4" style="margin-left:13%;">
            News Article
            </div>
            <a href="#">
            <div class="card1" >
            <Strong>Europe<br>and<br/>Australia</Strong>
            </div>
            </a>
            </section >
            <section style="margin-top:-40vh;clear:both">
            <a href="#">
            <div class="card" style="margin-top:-22%;">
            <Strong>Current Affairs</Strong>
            </div>
            </a>
            <a href="#">
            <div class="card1" style="margin-top:-22%;">
            <Strong>America</Strong>
            </div>
            </a>
            </section>
            <section style="clear:both">
            <a href="#">
            <div class="card" style="margin-top:-10%;">
            <Strong>Business</Strong>
            </div>
            </a>
            <a href="#">
            <div class="card1" style="margin-top:-10%;" >
            <Strong>World</Strong>
            </div>
            </a>
            </section>
           
           
    </body>
</html>