DEV'S

CSS - Continued

index.html

<!DOCTYPE html>
<!—To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.—>
<html>
    <head>
        <title>My Blog</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="mystyle.css" rel="stylesheet" />
    </head>
    <body>
        <div class="container">
            <header class="headerbar top">
                <h1 class="titlebar">A. P. J. Abdul Kalam</h1>
            </header>
            <aside class="leftbar">
                <nav>
                    <ul>
                        <li><a href="page1.html">Early life and education</a></li>
                        <li><a href="page1.html">Career as scientist</a></li>
                        <li><a href="page1.html">Presidency</a></li>
                        <li><a href="page1.html">Criticisms and controversies</a></li>
                        <li><a href="page1.html">Future India: 2020</a></li>
                        <li><a href="page1.html">Popular culture</a></li>
                        <li><a href="page1.html">Awards, Titles</a></li>
                        <li><a href="page1.html">Books and documentaries</a></li>

                    </ul> 
                </nav>

            </aside>
            <article class="main">
                <figure><img src="Apj_abdul_kalam.JPG" alt="A. P. J. Abdul Kalam" height="200" ></figure> 
                <section>
                    Avul Pakir Jainulabdeen Abdul Kalam (Listeni/?├Žbd?l k??l??m/; born 15 October 1931) is an Indian scientist and administrator who served as the 11th President of India from 2002 to 2007. Kalam was born and raised in Rameswaram, Tamil Nadu, studied physics at the St. Joseph’s College, Tiruchirappalli, and aerospace engineering at the Madras Institute of Technology, Chennai.

                    Before his term as President, he worked as an Aerospace engineer with Defence Research and Development Organisation (DRDO) and Indian Space Research Organisation (ISRO).[1] Kalam is popularly known as the Missile Man of India for his work on the development of ballistic missile and launch vehicle technology.[2] He played a pivotal organisational, technical and political role in India’s Pokhran-II nuclear tests in 1998, the first since the original nuclear test by India in 1974.[3]

                    Kalam was elected the President of India in 2002, defeating Lakshmi Sahgal, was nominated by Bharatiya Janata Party and supported by opposition Indian National Congress, the major political parties of India. He is currently a visiting professor at Indian Institute of Management Shillong, Indian Institute of Management Ahmedabad and Indian Institute of Management Indore, honorary fellow of Indian Institute of Science, Bangalore,[4] Chancellor of the Indian Institute of Space Science and Technology Thiruvananthapuram, a professor of Aerospace Engineering at Anna University (Chennai), JSS University (Mysuru) and an adjunct/visiting faculty at many other academic and research institutions across India.

                    Kalam advocated plans to develop India into a developed nation by 2020 in his book India 2020. He has received several prestigious awards, including the Bharat Ratna, India’s highest civilian honour. Kalam is known for his motivational speeches and interaction with the student community in India.[5] He launched his mission for the youth of the nation in 2011 called the What Can I Give Movement with a central theme to defeat corruption in India.
                </section>
                <section>
                    Avul Pakir Jainulabdeen Abdul Kalam was born on 15 October 1931 in a Tamil Muslim family to Jainulabudeen, a boat owner and Ashiamma, a housewife, at Rameswaram, Ramanathapuram District, located in the Indian state of Tamil Nadu.[6][7][8][9] He came from a poor background and started working at an early age to supplement his family’s income.[10] After completing school, Kalam distributed newspapers to financially contribute to his father’s income.[10][11] In his school years, he had average grades, but was described as a bright and hardworking student who had a strong desire to learn and spend hours on his studies, especially mathematics. He was just a simple man with a great fierceful heart in his childhood [11] After completing his school education at the Ramanathapuram Schwartz Matriculation School, Kalam went on to attend Saint Joseph’s College, Tiruchirappalli, then affiliated with the University of Madras, from where he graduated in physics in 1954.[12] Towards the end of the course, he was not enthusiastic about the subject and would later regret the four years he studied it. He then moved to Madras in 1955 to study aerospace engineering.[9] While Kalam was working on a senior class project, the Dean was dissatisfied with the lack of progress and threatened revoking his scholarship unless the project was finished within the next three days. He worked tirelessly on his project and met the deadline, impressing the Dean who later said, "I [Dean] was putting you [Kalam] under stress and asking you to meet a difficult deadline".[13] He narrowly missed achieving his dream of becoming a fighter pilot, as he placed ninth in qualifiers, and only eight positions were available in the IAF.[14]
                </section>
            </article>
            <aside class="rightbar"></aside>
            <footer class="headerbar bottom">
                <h3 class="copyrightsbar">Copyrights 2000-2015</h3>
            </footer>
        </div>
    </body>
</html>

mystyle.css

body{
    margin: 0;
}

header,footer,article,section,figure,aside{
    display: block;
}

ul{
    list-style: none;
    padding-left: 0;
    margin: 5px;
}

li{
    margin: 5px;
    background: #006666;
    padding: 10px;
    border-radius: 5px;

}

li:hover{
    background: #cccccc; 

}

a:link{
    text-decoration: none;
    color: #ffffff;
}

a:hover{
    color: #000000;
}

figure{
    float: left;
}

.container{
    width: 1000px;
    margin: 0 auto;
    background: #ccccff;
}

.titlebar{
    text-align: right;
    margin-right: 20px;
}

.copyrightsbar{
    text-align: left;
    margin-left: 20px; 
}

.headerbar{
    width: 990px;
    float: left;
    color: #ffffff;
    border-radius: 10px;
    margin: 5px;
}

.headerbar.top{
    height: 100px;
    background: #003333;

}

.headerbar.bottom{
    height: 60px;
    background: #666600; 
}

.leftbar{
    width: 190px;
    min-height: 590px;
    float: left;
    background: #ff9999;
    border-radius: 10px;
    margin: 5px;
    padding-top: 10px;

}

.rightbar{
    width: 190px;
    min-height: 600px;
    float: left;
    background: #660066;
    border-radius: 10px;
    margin: 5px;
}

.main{
    width: 570px;
    min-height: 580px;
    float: left;
    background: #9999ff; 
    padding: 10px;
    border-radius: 10px;
    margin: 5px;
}

HTML5

2018-11-27 21:35:02
1) Ionic - Angular Videos
2018-06-29 05:46:32
2) Service - Broadcast Receiver
2018-06-28 03:55:43
3) Activity - Bundle - Option Menu - ActionBar
2018-06-27 03:27:57
4) Relative Layout
2018-06-25 03:14:55
5) LinearLayout Calc
2018-02-08 05:14:15
6) PHP HelloWorld
2018-01-19 04:57:25
7) Angular 5 - Material Design - Reactive Form - Continued
2018-01-19 04:06:05
8) Feedback
2018-01-19 02:07:18
9) Angular 5 - Material Design
2018-01-18 03:05:47
10) Angular 5 - Custom Directives,Pipes - Promise And Observables
2018-01-17 22:51:45
11) Angular 5 - Component Interaction
2018-01-17 03:14:26
12) Angular 5 - Registration Form - WebService
2018-01-17 01:46:34
13) Angular 5 - Directives
2018-01-16 23:13:47
14) Angular 5 - Lifecycle Hooks - Routing
2018-01-16 21:36:25
15) CRUD Example - TS - LocalStorage - Delete
2018-01-16 13:34:40
16) Shopping App - Api Calls - JSON
2018-01-16 03:17:09
17) CRUD Example - TS - LocalStorage - View - Add
2018-01-15 23:57:32
18) TypeScript - Part 2
2018-01-15 23:02:07
19) TypeScript - Part 1
2018-01-15 04:46:29
20) TypeScript To JavaScript
2018-01-15 00:48:22
21) First Angular5 App
2016-01-17 23:47:13
22) JQuery Mobile - My Account Page Addon
2016-01-16 02:38:09
23) HTML5 - CSS - JavaScript Exam Preparation
2016-01-14 02:34:08
24) JQuery Validation Plugin - Basics
2016-01-13 02:35:46
25) Final - JQuery Mobile - IndexedDB Addon
2016-01-12 03:23:20
26) JQuery Mobile - IndexedDB Addon
2016-01-11 00:08:42
27) Students Record - JQuery Mobile App
2016-01-09 04:03:04
28) JQuery Mobile PageChange Event
2016-01-08 03:51:55
29) Beginning JQuery Mobile
2016-01-07 03:47:24
30) WebWorker Example
2016-01-06 04:11:18
31) IndexedDB - ObjectStore - Tansaction - Cursor - Part 2
2016-01-05 03:46:35
32) Student Record - IndexedDB Migration
2016-01-04 23:47:55
33) IndexedDB - ObjectStore - Tansaction - Cursor
2016-01-04 04:48:33
34) Single Page Design And Geolocation Example With Ajax
2016-01-03 23:39:19
35) Drag And Drop Example
2016-01-03 01:57:50
36) Beginning Responsive WebDesign Using JQuery
2016-01-03 01:56:17
37) HTML5 Canvas Simple Example
2016-01-03 01:55:11
38) JQuery Object - Context - Function Callbacks
2015-12-29 23:28:49
39) JQuery DOM Manipulation And LocalStorage
2015-11-30 23:50:59
40) JavaScript EventListeners
2015-11-30 04:34:08
41) MultiPage Design
2015-11-28 03:02:52
42) HTML Box Design
2015-07-03 03:09:55
43) KO Custom Component
2015-07-02 23:25:36
44) KO Custom Binding And Template Binding
2015-07-01 23:27:04
45) KO Simplelist
2015-07-01 01:44:40
46) KO Introduction And JQuery Simple List
2015-01-29 00:34:17
47) Canvas - DragDrop - Video - Audio Example
2015-01-28 03:57:05
48) CSS Media Type - IndexedDB WHERE And LIKE Clause
2015-01-27 02:24:12
49) IndexedDB Simple Example
2015-01-24 00:11:32
50) Students Record - JQueryMobile - GeoLocation - Ajax Addon
2015-01-24 00:08:19
51) GeoLocation And Ajax Example
2015-01-21 05:23:32
52) Students Record - JQueryMobile - SessionStorage - Login State
2015-01-19 23:33:29
53) JQueryMobile - Page Change - Popup Addon
2015-01-19 00:21:28
54) JQueryMobile - Data-Role Introduction
2015-01-17 03:22:07
55) Handle PageLinks
2015-01-16 04:28:20
56) Simple HTML5 Calculator
2015-01-16 03:03:45
57) Load External DOM - Ajax In Simple Way
2015-01-16 03:01:48
58) JQuery Document Ready - Placement Of Script Tag
2015-01-13 22:54:25
59) Dynamic Layout Technique Using JQuery
2015-01-13 04:04:19
60) JQuery - Introduction
2015-01-12 23:45:02
61) LocalStorage - CRUD
2015-01-12 00:06:03
62) JSON - LocalStorage Example
2015-01-11 22:47:24
63) JavaScript - Data Persistency Using LocalStorage - SessionStorage
2015-01-10 03:17:01
64) HTML - JavaScript - Dynamic Table
2015-01-10 00:32:26
65) JavaScript Introduction
2015-01-09 04:07:47
66) CSS - Continued
2015-01-08 03:26:39
67) CSS - Margin - Padding - HTML5 Semantic Elements
2015-01-07 22:44:01
68) HTML-CSS Introduction
2014-11-25 14:27:00
69) Angular JS Simple Example
2014-10-16 05:01:39
70) CSS Media Example - Different CSS For Desktop - Tablet - Phone Screen Sizes
2014-10-15 04:20:11
71) Miscellaneous In Addition To Previous Exercises
2014-10-15 04:13:45
72) Some Useful RegEx
2014-10-14 02:57:45
73) Shopping List App Using IndexedDB
2014-10-14 00:04:10
74) IndexedDB Introduction
2014-10-14 00:00:01
75) JavaScript Prototyping
2014-10-11 03:50:47
76) Introduction To Canvas Drawing - Tabs - Popup Warning Dialog
2014-10-11 00:03:50
77) Popup - Validation - Shopping List App Updated
2014-10-10 22:34:42
78) RegEx Pattern For Validation - Shopping List App
2014-10-10 05:12:13
79) Password Lock-Shopping List App
2014-10-09 22:49:34
80) JQuery Shopping - Updated
2014-10-09 05:10:00
81) JQuery Mobile Forms - Save Checkbox - Radio Button Checked States
2014-10-08 22:18:40
82) JQuery Mobile Forms - Additional Data-role Attribute Values
2014-10-08 02:17:48
83) JQuery Shopping List Alternate Approach. JQ Append & Pagechange
2014-10-07 03:02:43
84) JQuery Mobile Page Change Events
2014-10-06 02:19:53
85) JQuery Mobile Data- Attribute Reference
2014-10-06 00:13:01
86) Shopping List Using LocalStorage
2014-10-06 00:10:02
87) JQuery Mobile Introduction
2014-10-06 00:07:40
88) JQuery Page Loading Technique
2014-10-06 00:05:39
89) Mobile Ready Page Extended - Load Multiple Pages Using JQuery
2014-10-06 00:00:27
90) A Mobile First Design Using JQuery - Window-Size
2014-10-05 23:58:01
91) JavaScript Array - Create - Update - Delete
2014-10-05 23:55:43
92) JQuery CSS Capabilities - A Mobile Ready Page
2014-10-05 23:52:42
93) JQuery Introduction - Unit Conversion Using JQuery
2014-10-05 23:49:58
94) JavaScript - DOM Manipulation-Table-Calculator
2014-10-05 23:40:06
95) GeoLocation
2014-10-05 23:37:36
96) Margin And Border Radius
2014-10-05 23:34:06
97) HTML5 Semantic Elements, CSS,SVG Examples
2014-10-05 23:28:45
98) HTML,CSS Selectors

© Vasudev.H / Email: tech3in@live.com