Free HTML5 webpage. Edit template or build your own with the cmxads html5 tags editor.

Scroll down Scroll up

Scroll down Scroll up

CSS snippets highlight and drag
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX



/* Clear floats after the columns */
/* FLOATING COLUMNS CSS FORM MOBILE STACK ON MINIMIZE */

.row:after {
content: "";
display: table;
clear: both;
}
.column {
margin-left:15px;
margin-right:15px;
}
/* 4 COLUMNS 25% 3 COULMNS 33% */

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 33.3%;
}
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}





body,html{

}

#header .header header {

}

#container .container{

}

#content .content section article{

}

#footer .footer footer{

}

#sidebar .sidebar aside{

}

#menu .menu menu{

}

#nav .nav nav ul li ol{

}


div{

}


p {

}

blockquote{

}

pre{

}

table{

}

form{

}


BORDER RADIUS
border: 2px solid;
border-top-right-radius: 2em;
border-top-left-radius: 2em;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
-khtml-border-radius: 25px;
-o-border-radius: 25px;
-webkit-border-radius : 4px;


BOX SHADOW
box-shadow : 0 2px 2px rgba(0,0,0,0.3);
-webkit-box-shadow : 0 2px 2px rgba(0,0,0,0.3);



GRADIENT
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
background: linear-gradient(top, #3e779d, #65a9d7);


DISPLAY
header, footer, article, nav, section, aside, time, hgroup {
display : block;
}
display : inline;
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around;
display: flex;
justify-content: space-around;


A STYLE
A {
color : #0A647C;
text-decoration : none;
}
A:HOVER {
color : #DB0202;
}

BACKGROUND
background : url(images/ai4.png) no-repeat 0 7px;
background: #65a9d7;
background-repeat: repeat-y;
background-repeat: repeat-x;

body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}


TEXT ALIGN
text-align:center;
text-align:left;
text-align:right;
text-align:justify;

FONT FACE
@font-face {
font-family: 'schwarzwaldregular';
src: url('schwrzw-webfont.eot');
src: url('schwrzw-webfont.eot?#iefix') format('embedded-opentype'),
url('schwrzw-webfont.woff') format('woff'),
url('schwrzw-webfont.ttf') format('truetype'),
url('schwrzw-webfont.svg#schwarzwaldregular') format('svg');
font-weight: normal;
/*font-style: normal;*/
}



TEXT STYLE
text-shadow: 2px 2px #ff0000;
text-decoration : none;
text-decoration : underline;
text-decoration : line-through;
text-decoration : overline;
text-decoration : inherit;
text-decoration : initial;
color : black;
font-weight: bold;
font-weight: normal;
font-size : 10px;
font-style: italic;
font-style: normal;
font-style: oblique;
font-stretch: expanded;
font: 15px arial, sans-serif;
line-height : 15px;
word-wrap: break-word;
word-wrap: normal;

BORDER
border:1px dotted #CCCC33;
border: 2px solid #DB0202;
border-left: 2px solid #DB0202;
border-right: 2px solid #DB0202;
border-top: 2px solid #DB0202;
border-bottom: 2px solid #DB0202;


MARGIN
inherit auto initial px pt cm
top - right - bottom - left
margin : 0 0 20px 0;
top - right left - bottom
margin : 0 0 20px;
top bottom - right left
margin : 0px 0px;
ALL
margin :0px;
margin-bottom: 2cm;
margin-left: 2cm;
margin-right: 2cm;
margin-top: 2cm;

PADDING
inherit auto initial px pt cm
top - right - bottom - left
padding : 0 0 20px 0;
top - right left - bottom
padding : 0 0 20px;
top bottom - right left
padding : 0px 0px;
ALL
padding :0px;
padding-bottom: 2cm;
padding-left: 2cm;
padding-right: 2cm;
padding-top: 2cm;

OVERFLOW
overflow : hidden;
overflow-y : hidden;
overflow-x : hidden;
overflow-y : auto;
overflow-x : auto;
overflow-y : scroll;
overflow-x : scroll;

POSITION
position: absolute;
left: 100px;
top: 150px;
position : relative;
position : inherit;
position : fixed;
position : static;
position : initial;


TABLE
table-layout: fixed;
tr:nth-child(odd) {
background : #FFF;
}
tr:nth-child(even) {
background : #DDD;
}

vertical-align:top;
/* Chrome, Safari, Opera */
-webkit-column-span: all;
column-span: all;
column-span: 1;

div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
-moz-column-width: 100px; /* Firefox */
column-width: 100px;
}


ANIMATION
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

/* Chrome, Safari, Opera */
div {
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
}

HEIGHT WIDTH
max-height: 50px;
min-height: 50px;
height: 50px;
width: 50px;
width: auto;

LIST
ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;}
list-style: none;

FLOAT
float:left;
float:right;

CURSOR
cursor: crosshair;
cursor: help;
cursor: wait;