Framework/grid system in css3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MEDIA QUERY</title>
<style>
body {
background:#CCC;
}
.row {
margin:10px;
clear:both;
padding:10px;
}
.col-12 {
width: 100%;
}
.col-11 {
width: 91.66666667%;
}
.col-10 {
width: 83.33333333%;
}
.col-9 {
width: 75%;
}
.col-8 {
width: 66.66666667%;
}
.col-7 {
width: 58.33333333%;
}
.col-6 {
width: 50%;
}
.col-5 {
width: 41.66666667%;
}
.col-4 {
width: 33.33333333%;
}
.col-3 {
width: 25%;
}
.col-2 {
width: 16.66666667%;
}
.col-1 {
width: 8.33333333%;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
float: left;
}
@media(max-width:1024px){
body {
background:#396;
}
}
@media(max-width:780px){
body {
background:#699;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
width:100%;
}
}
@media(max-width:380px){
body {
background:#F93;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
width:100%;
}
}
p{
margin:10px;
}
</style>
</head>
<body>
<div dir="row">
<div class="col-12" style="background:#666">
<h1 align="center">Welcome to Media Query</h1>
</div>
</div>
<div class="row">
<div class="col-6" style="background:#FC9">
<p>
(Hypertext markup language)
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
</p>
</div>
<div class="col-6" style="background:#96F">
<p>
(Hypertext markup language)
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
</p>
</div>
</div>
<div class="row">
<div class="col-4">
<p>
(Hypertext markup language)
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
</p>
</div>
<div class="col-4" style="background:#9CC">
<p>
(Hypertext markup language)
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
</p>
</div>
<div class="col-4">
<p>
(Hypertext markup language)
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
</p>
</div>
</div>
<div class="row">
<div class="col-3" style="background:#09C">
<p>
(Hypertext markup language)
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
</p>
</div>
<div class="col-9">
<p>
(Hypertext markup language)
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
</p>
</div>
</div>
<div class="row">
<div class="col-12" style="background:#6C6"><p align="center">copyrigt@2017 www.jeevanit.com</p></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>MEDIA QUERY</title>
<style>
body {
background:#CCC;
}
.row {
margin:10px;
clear:both;
padding:10px;
}
.col-12 {
width: 100%;
}
.col-11 {
width: 91.66666667%;
}
.col-10 {
width: 83.33333333%;
}
.col-9 {
width: 75%;
}
.col-8 {
width: 66.66666667%;
}
.col-7 {
width: 58.33333333%;
}
.col-6 {
width: 50%;
}
.col-5 {
width: 41.66666667%;
}
.col-4 {
width: 33.33333333%;
}
.col-3 {
width: 25%;
}
.col-2 {
width: 16.66666667%;
}
.col-1 {
width: 8.33333333%;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
float: left;
}
@media(max-width:1024px){
body {
background:#396;
}
}
@media(max-width:780px){
body {
background:#699;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
width:100%;
}
}
@media(max-width:380px){
body {
background:#F93;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
width:100%;
}
}
p{
margin:10px;
}
</style>
</head>
<body>
<div dir="row">
<div class="col-12" style="background:#666">
<h1 align="center">Welcome to Media Query</h1>
</div>
</div>
<div class="row">
<div class="col-6" style="background:#FC9">
<p>
(Hypertext markup language)
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
</p>
</div>
<div class="col-6" style="background:#96F">
<p>
(Hypertext markup language)
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
</p>
</div>
</div>
<div class="row">
<div class="col-4">
<p>
(Hypertext markup language)
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
</p>
</div>
<div class="col-4" style="background:#9CC">
<p>
(Hypertext markup language)
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
</p>
</div>
<div class="col-4">
<p>
(Hypertext markup language)
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
</p>
</div>
</div>
<div class="row">
<div class="col-3" style="background:#09C">
<p>
(Hypertext markup language)
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
</p>
</div>
<div class="col-9">
<p>
(Hypertext markup language)
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
</p>
</div>
</div>
<div class="row">
<div class="col-12" style="background:#6C6"><p align="center">copyrigt@2017 www.jeevanit.com</p></div>
</div>
</body>
</html>
Comments
Post a Comment