CSS LAYOUT-4
.
.
.
.
.
<!DOCTYPE html>
<html>
<head>
<title>MY SITE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta content='Greece' name='country'/>
<meta content='el' name='geo.country'/>
<meta content='Greece' name='geo.placename'/>
<meta content='el, en-us' https-equiv='content-language'/>
<meta content='WEB DESIGNER' name='author'/>
<meta content='HTML CODES, SITE BUILD, BLOG WIDGETS, SITE TEMPLATES' name='keywords'/>
<link rel='icon' href='https://cdn.glitch.com/ab5b2c08-bacb-4a3c-97b5-eb892a46df48%2Ffavicon.ico' type='image/x-icon'/>
<style>
/* BODY STYLE ----------------------------------------------- */
html, body {margin:0;padding:0;width:100%;}
body {background:#333;color:#FFF;font:13px Arial;}
* {box-sizing: border-box;}
/* HEADERS STYLE ----------------------------------------------- */
h1 {color:#FFFF00;margin:0px;padding:5px;font:bold 40px arial;}
h2 {color:#00FF00;margin:0px;padding:5px;font:bold 18px arial;}
h3 {background:#115599;color:#FFF;margin:0px;padding:5px;font:bold 14px arial;}
h4 {background:#F11111;color:#FFF;margin:0px;padding:5px;font:bold 14px arial;}
h5 {background:#009900;color:#FFF;margin:0px;padding:5px;font:bold 14px arial;}
h6 {background:#FF6600;color:#000;margin:0px;padding:5px;font:bold 14px arial;}
/* LINKS STYLE ----------------------------------------------- */
a:link {color:#33FFFF;text-decoration:none;}
a:visited {color:#33FFFF;text-decoration:none;}
a:hover {color:#FFFF00;text-decoration:none;}
a:active {color:#FFF;text-decoration:underline;}
/* NAVBARS STYLE ----------------------------------------------- */
#navbar{background:rgba(0,30,0, 0.75);color:#FFF;width:100%;height:30px;float:left;margin:0px;padding:0px;font:13px arial;}
#navbar2{background:rgba(0,30,0, 0.75);color:#FFF;width:100%;height:30px;float:left;margin:0px;padding:0px;font:13px arial;}
/* SIDEBARS STYLE ----------------------------------------------- */
@media only screen and (max-width:2560px) {
#header {float:left;width:25%;height:110px;margin:0;padding:0px;background:rgba(0,0,30, 0.75);}
#header2{float:left;width:75%;height:110px;margin:0;padding:0px;background:rgba(30,0,0, 0.75);}
#sb-240 {width:13%;min-width:100px;background:#105105;float:left;padding:5px;border-radius:8px;}
#mp-1000{width:calc(74% - 10px);min-width:200px;background:#173377;float:left;margin:5px;padding:5px;height:auto;font:13px arial;border-radius:8px;}
#sb-260 {width:13%;min-width:100px;background:#661111;float:left;padding:5px;border-radius:8px;}
@media only screen and (max-width:1920px) {
#header {float:left;width:25%;height:110px;margin:0;padding:0px;background:rgba(0,0,30, 0.75);}
#header2{float:left;width:75%;height:110px;margin:0;padding:0px;background:rgba(30,0,0, 0.75);}
#sb-240 {width:16%;min-width:100px;background:#105105;float:left;padding:5px;border-radius:8px;}
#mp-1000{width:calc(68% - 10px);min-width:200px;background:#173377;float:left;margin:5px;padding:5px;height:auto;font:13px arial;border-radius:8px;}
#sb-260 {width:16%;min-width:100px;background:#661111;float:left;padding:5px;border-radius:8px;}}
@media only screen and (max-width:1600px) {
#header {float:left;width:25%;height:110px;margin:0;padding:0px;background:rgba(0,0,30, 0.75);}
#header2{float:left;width:75%;height:110px;margin:0;padding:0px;background:rgba(30,0,0, 0.75);}
#sb-240 {width:18%;min-width:100px;background:#105105;float:left;padding:5px;border-radius:8px;}
#mp-1000{width:calc(64% - 10px);min-width:200px;background:#173377;float:left;margin:5px;padding:5px;height:auto;font:13px arial;border-radius:8px;}
#sb-260 {width:18%;min-width:100px;background:#661111;float:left;padding:5px;border-radius:8px;}}
@media only screen and (max-width:1440px) {
#header {float:left;width:25%;height:110px;margin:0;padding:0px;background:rgba(0,0,30, 0.75);}
#header2{float:left;width:75%;height:110px;margin:0;padding:0px;background:rgba(30,0,0, 0.75);}
#sb-240 {width:20%;min-width:100px;background:#105105;float:left;padding:5px;border-radius:8px;}
#mp-1000{width:calc(60% - 10px);min-width:200px;background:#173377;float:left;margin:5px;padding:5px;height:auto;font:13px arial;border-radius:8px;}
#sb-260 {width:20%;min-width:100px;background:#661111;float:left;padding:5px;border-radius:8px;}}
@media only screen and (max-width:1368px) {
#header {float:left;width:25%;height:110px;margin:0;padding:0px;background:rgba(0,0,30, 0.75);}
#header2{float:left;width:75%;height:110px;margin:0;padding:0px;background:rgba(30,0,0, 0.75);}
#sb-240 {width:20%;min-width:100px;background:#105105;float:left;padding:5px;border-radius:8px;}
#mp-1000{width:calc(60% - 10px);min-width:200px;background:#173377;float:left;margin:5px;padding:5px;height:auto;font:13px arial;border-radius:8px;}
#sb-260 {width:20%;min-width:100px;background:#661111;float:left;padding:5px;border-radius:8px;}}
@media only screen and (max-width:1280px) {
#header {float:left;width:25%;height:110px;margin:0;padding:0px;background:rgba(0,0,30, 0.75);}
#header2{float:left;width:75%;height:110px;margin:0;padding:0px;background:rgba(30,0,0, 0.75);}
#sb-240 {display: none;}
#mp-1000{width:calc(78% - 10px);min-width:200px;background:#173377;float:left;margin:5px;padding:5px;height:auto;font:13px arial;border-radius:8px;}
#sb-260 {width:22%;min-width:100px;background:#661111;float:left;padding:5px;border-radius:8px;}}
@media only screen and (max-width:1200px) {
#header {float:left;width:25%;height:110px;margin:0;padding:0px;background:rgba(0,0,30, 0.75);}
#header2{float:left;width:75%;height:110px;margin:0;padding:0px;background:rgba(30,0,0, 0.75);}
#sb-240 {display: none;}
#mp-1000{width:calc(76% - 10px);min-width:200px;background:#173377;float:left;margin:5px;padding:5px;height:auto;font:13px arial;border-radius:8px;}
#sb-260 {width:24%;min-width:100px;background:#661111;float:left;padding:5px;border-radius:8px;}}
@media only screen and (max-width:1152px;) {
#header {float:left;width:25%;height:110px;margin:0;padding:0px;background:rgba(0,0,30, 0.75);}
#header2{float:left;width:75%;height:110px;margin:0;padding:0px;background:rgba(30,0,0, 0.75);}
#sb-240 {display: none;}
#mp-1000{width:calc(74% - 10px);min-width:200px;background:#173377;float:left;margin:5px;padding:5px;height:auto;font:13px arial;border-radius:8px;}
#sb-260 {width:26%;min-width:100px;background:#661111;float:left;padding:5px;border-radius:8px;}}
@media only screen and (max-width:1024px) {
#header {float:left;width:25%;height:110px;margin:0;padding:0px;background:rgba(0,0,30, 0.75);}
#header2{float:left;width:75%;height:110px;margin:0;padding:0px;background:rgba(30,0,0, 0.75);}
#sb-240 {display: none;}
#mp-1000{width:calc(72% - 10px);min-width:200px;background:#173377;float:left;margin:5px;padding:5px;height:auto;font:13px arial;border-radius:8px;}
#sb-260 {width:28%;min-width:100px;background:#661111;float:left;padding:5px;border-radius:8px;}}
@media only screen and (max-width:1000px) {
#header {float:left;width:30%;height:110px;margin:0;padding:0px;background:rgba(0,0,30, 0.75);}
#header2{float:left;width:70%;height:110px;margin:0;padding:0px;background:rgba(30,0,0, 0.75);}
#sb-240 {display: none;}
#mp-1000{width:100%;min-width:480px;background:#400030;float:left;margin:0px;padding:5px;height:auto;font:13px arial;border-radius:8px;}
#sb-260 {display: none;}}
@media only screen and (min-device-width:481px) and (max-device-width:800px) {
#header {float:left;width:100%;height:110px;margin:0;padding:0px;background:rgba(0,0,30, 0.75);}
#header2{display: none;}
#navbar{display: none;}
#sb-240 {display: none;}
#mp-1000{width:100%;min-width:480px;background:#000040;float:left;margin:0px;padding:5px;height:auto;font:13px arial;border-radius:8px;}
#sb-260 {display: none;}}
</style>
</head>
<body>
<div id="header">
<h1>MY CODES</h1>
<h2>CODES FOR WEB DESIGNERS</h2>
</div>
<div id="header2">
<h2>Here you can put a widget</h2>
</div>
<div id="navbar">
<a href="https://kodez.glitch.me" target="_parent"><button style="width:auto; height:28px;background:#333;color:#FFF;font:14px Arial;">Home</button></a>
<a href="https://kodez.glitch.me" target="_parent"><button style="width:auto; height:28px;background:#333;color:#FFF;font:14px Arial;">Page1</button></a>
<a href="https://kodez.glitch.me" target="_parent"><button style="width:auto; height:28px;background:#333;color:#FFF;font:14px Arial;">Page2</button></a>
<a href="https://kodez.glitch.me" target="_parent"><button style="width:auto; height:28px;background:#333;color:#FFF;font:14px Arial;">Page3</button></a>
<a href="https://kodez.glitch.me" target="_parent"><button style="width:auto; height:28px;background:#333;color:#FFF;font:14px Arial;">Page4</button></a>
<a href="https://kodez.glitch.me" target="_parent"><button style="width:auto; height:28px;background:#333;color:#FFF;font:14px Arial;">Page5</button></a>
<a href="https://kodez.glitch.me" target="_parent"><button style="width:auto; height:28px;background:#333;color:#FFF;font:14px Arial;">Page6</button></a>
<a href="https://kodez.glitch.me" target="_parent"><button style="width:auto; height:28px;background:#333;color:#FFF;font:14px Arial;">Page7</button></a>
<a href="https://kodez.glitch.me" target="_parent"><button style="width:auto; height:28px;background:#333;color:#FFF;font:14px Arial;">Page8</button></a>
<a href="https://kodez.glitch.me" target="_parent"><button style="width:auto; height:28px;background:#333;color:#FFF;font:14px Arial;">Page9</button></a>
<a href="https://kodez.glitch.me" target="_parent"><button style="width:auto; height:28px;background:#333;color:#FFF;font:14px Arial;">Page10</button></a>
</div>
<div id="sb-240">
<base target="_blank">
<h3>INDEX-HTML PAGES</h3>
<a href="https://kodez.glitch.me/index01.html">INDEX-01.html</a><br>
<a href="https://kodez.glitch.me/index02.html">INDEX-02.html</a><br>
<a href="https://kodez.glitch.me/index03.html">INDEX-03.html</a><br>
<a href="https://kodez.glitch.me/index04.html">INDEX-04.html</a><br>
<a href="https://kodez.glitch.me/index05.html">INDEX-05.html</a><br>
<a href="https://kodez.glitch.me/index06.html">INDEX-06.html</a><br>
<a href="https://kodez.glitch.me/index07.html">INDEX-07.html</a><br>
<a href="https://kodez.glitch.me/index08.html">INDEX-08.html</a><br>
<a href="https://kodez.glitch.me/index09.html">INDEX-09.html</a><br>
<a href="https://kodez.glitch.me/index10.html">INDEX-10.html</a><br>
<a href="https://kodez.glitch.me/index11.html">INDEX-11.html</a><br>
<a href="https://kodez.glitch.me/index12.html">INDEX-12.html</a><br>
<a href="https://kodez.glitch.me/index13.html">INDEX-13.html</a><br>
<a href="https://kodez.glitch.me/index14.html">INDEX-14.html</a><br>
<a href="https://kodez.glitch.me/index15.html">INDEX-15.html</a><br>
<a href="https://kodez.glitch.me/index16.html">INDEX-16.html</a><br>
<a href="https://kodez.glitch.me/index17.html">INDEX-17.html</a><br>
<a href="https://kodez.glitch.me/index18.html">INDEX-18.html</a><br>
<a href="https://kodez.glitch.me/index19.html">INDEX-19.html</a><br>
<a href="https://kodez.glitch.me/index20.html">INDEX-20.html</a><br>
<a href="https://kodez.glitch.me/index21.html">INDEX-21.html</a><br>
<a href="https://kodez.glitch.me/index22.html">INDEX-22.html</a><br>
<a href="https://kodez.glitch.me/index23.html">INDEX-23.html</a><br>
<a href="https://kodez.glitch.me/index24.html">INDEX-24.html</a><br>
<a href="https://kodez.glitch.me/index25.html">INDEX-25.html</a><br>
<a href="https://kodez.glitch.me/index26.html">INDEX-26.html</a><br>
<a href="https://kodez.glitch.me/index27.html">INDEX-27.html</a><br>
<a href="https://kodez.glitch.me/index28.html">INDEX-28.html</a><br>
<a href="https://kodez.glitch.me/index29.html">INDEX-29.html</a><br>
<a href="https://kodez.glitch.me/index30.html">INDEX-30.html</a><br>
<a href="http://the-best-widgets.blogspot.gr/2015/02/gif-blog.html" target="_blank">
<img src="https://lh3.googleusercontent.com/-wr1G3Zv28wk/U3pc-vHib5I/AAAAAAAALkA/n65N_C2eZ_c/w240-h180-no/POOLS-4X3-A.gif"
border="0" alt="GREEK-ISLANDS-POOLS-4X3-A" width="240" height="180"/></a>
</div>
<div id="mp-1000">
<h4>ΕΔΩ ΕΙΝΑΙ Ο ΤΙΤΛΟΣ ΤΗΣ ΑΝΑΡΤΗΣΗΣ</h4>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
<a>Αυτό είναι το κείμενο της κεντρικής ανάρτησης του site.</a><br>
</div>
<div id="sb-260">
<base target="_blank">
<h3>INDEX-HTML PAGES</h3>
<a href="https://kodez.glitch.me/index01.html">INDEX-01.html</a><br>
<a href="https://kodez.glitch.me/index02.html">INDEX-02.html</a><br>
<a href="https://kodez.glitch.me/index03.html">INDEX-03.html</a><br>
<a href="https://kodez.glitch.me/index04.html">INDEX-04.html</a><br>
<a href="https://kodez.glitch.me/index05.html">INDEX-05.html</a><br>
<a href="https://kodez.glitch.me/index06.html">INDEX-06.html</a><br>
<a href="https://kodez.glitch.me/index07.html">INDEX-07.html</a><br>
<a href="https://kodez.glitch.me/index08.html">INDEX-08.html</a><br>
<a href="https://kodez.glitch.me/index09.html">INDEX-09.html</a><br>
<a href="https://kodez.glitch.me/index10.html">INDEX-10.html</a><br>
<a href="https://kodez.glitch.me/index11.html">INDEX-11.html</a><br>
<a href="https://kodez.glitch.me/index12.html">INDEX-12.html</a><br>
<a href="https://kodez.glitch.me/index13.html">INDEX-13.html</a><br>
<a href="https://kodez.glitch.me/index14.html">INDEX-14.html</a><br>
<a href="https://kodez.glitch.me/index15.html">INDEX-15.html</a><br>
<a href="https://kodez.glitch.me/index16.html">INDEX-16.html</a><br>
<a href="https://kodez.glitch.me/index17.html">INDEX-17.html</a><br>
<a href="https://kodez.glitch.me/index18.html">INDEX-18.html</a><br>
<a href="https://kodez.glitch.me/index19.html">INDEX-19.html</a><br>
<a href="https://kodez.glitch.me/index20.html">INDEX-20.html</a><br>
<a href="https://kodez.glitch.me/index21.html">INDEX-21.html</a><br>
<a href="https://kodez.glitch.me/index22.html">INDEX-22.html</a><br>
<a href="https://kodez.glitch.me/index23.html">INDEX-23.html</a><br>
<a href="https://kodez.glitch.me/index24.html">INDEX-24.html</a><br>
<a href="https://kodez.glitch.me/index25.html">INDEX-25.html</a><br>
<a href="https://kodez.glitch.me/index26.html">INDEX-26.html</a><br>
<a href="https://kodez.glitch.me/index27.html">INDEX-27.html</a><br>
<a href="https://kodez.glitch.me/index28.html">INDEX-28.html</a><br>
<a href="https://kodez.glitch.me/index29.html">INDEX-29.html</a><br>
<a href="https://kodez.glitch.me/index30.html">INDEX-30.html</a><br>
<a href="http://the-best-widgets.blogspot.gr/2015/02/gif-blog.html" target="_blank">
<img src="https://lh6.googleusercontent.com/-m5M9bLdyVT4/U3ZTRkjDR4I/AAAAAAAALiE/1klKchwGJxE/w240-h180-no/TABLES-4X3.gif"
border="0" alt="ROMANTIC-VIEWS-4X3" width="240" height="180"/></a>
</div>
</body>
</html>
