owngeek owngeek

## placeholder_styling.css
<style>
body{background: #087585;}
.plcehldr input {width: 200px;border: none;background: #f8f8f8;height: 33px; color: blue;position: absolute;top: 0;left: 0;margin: auto;right: 0;   bottom: 0;
 border-radius: 2px;  padding-left: 6px; }
.plcehldr img{width: 18px;position: absolute; right: 0;top: 8px; cursor:pointer;}


.plcehldr input::-webkit-input-placeholder  { /* Chrome/Opera/Safari */
  color: #087585 ;

## Checkbox_Styling.css
<style>
body {
	background: #d2d9ca;
}

h1 {
	color: #eee;
	font: 30px Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-shadow: 0px 1px black;

## MixItUp.css
<style>
.vv{ width:500px; background-color:#9C6; overflow:hidden;}
.mix{ width:100px; height:100px; background-color:#C30; float:left; margin:10px;}
 .mix{
    display: none;
}
</style>

## pure_css_tab.css
    <style>

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

## jquery_animation.css
<style>
.btn{width:100px; height:50px; background-color:#309; color:#fff; margin-bottom:20px;}
.div1{background:#FF0000;height:50px;width:50px;position:absolute;}
.div2{background:#CC0066;height:50px;width:50px;position:absolute; top:20%;}
.div3{background:#0066FF;height:50px;width:50px;position:absolute; top:30%;}
</style>

## masonry_css
<style>
  * {
  box-sizing: border-box;
}

.container {
  background: #EEE;
  width: 50%;
  margin-bottom: 20px;
}

## html5_video.html
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
</video>
<!--html_youtube_videos-->
<iframe width="420" height="345" src="https://www.youtube.com/embed/TsV4Cg-4KsE?autoplay=1">

## html5_tag
Tag	Description
<article>	Defines an article in the document
<aside>	Defines content aside from the page content
<bdi>	Defines a part of text that might be formatted in a different direction from other text
<details>	Defines additional details that the user can view or hide
<dialog>	Defines a dialog box or window
<figcaption>	Defines a caption for a <figure> element
<figure>	Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>	Defines a footer for the document or a section
<header>	Defines a header for the document or a section

## accordion.css
<style>
#collapse * {
    display:block;
    list-style:none;
    cursor:pointer;
    text-transform:uppercase;
}
#collapse ul li {
}
.open{}

## hover.css
<style>
.rollover figure {
  position: relative;
  overflow: hidden;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rollover figure figcaption {
	<style>
	body{background: #087585;}
	.plcehldr input {width: 200px;border: none;background: #f8f8f8;height: 33px; color: blue;position: absolute;top: 0;left: 0;margin: auto;right: 0; bottom: 0;
	border-radius: 2px; padding-left: 6px; }
	.plcehldr img{width: 18px;position: absolute; right: 0;top: 8px; cursor:pointer;}



	.plcehldr input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: #087585 ;
	<style>
	body {
	background: #d2d9ca;
	}

	h1 {
	color: #eee;
	font: 30px Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-shadow: 0px 1px black;
	<style>
	.vv{ width:500px; background-color:#9C6; overflow:hidden;}
	.mix{ width:100px; height:100px; background-color:#C30; float:left; margin:10px;}
	.mix{
	display: none;
	}
	</style>
	<style>

	* {
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}
	<style>
	.btn{width:100px; height:50px; background-color:#309; color:#fff; margin-bottom:20px;}
	.div1{background:#FF0000;height:50px;width:50px;position:absolute;}
	.div2{background:#CC0066;height:50px;width:50px;position:absolute; top:20%;}
	.div3{background:#0066FF;height:50px;width:50px;position:absolute; top:30%;}
	</style>
	<style>
	* {
	box-sizing: border-box;
	}

	.container {
	background: #EEE;
	width: 50%;
	margin-bottom: 20px;
	}
	<!DOCTYPE html>
	<html>
	<body>
	<video width="400" controls>
	<source src="mov_bbb.mp4" type="video/mp4">
	<source src="mov_bbb.ogg" type="video/ogg">
	</video>
	<!--html_youtube_videos-->
	<iframe width="420" height="345" src="https://www.youtube.com/embed/TsV4Cg-4KsE?autoplay=1">
	Tag Description
	<article> Defines an article in the document
	<aside> Defines content aside from the page content
	<bdi> Defines a part of text that might be formatted in a different direction from other text
	<details> Defines additional details that the user can view or hide
	<dialog> Defines a dialog box or window
	<figcaption> Defines a caption for a <figure> element
	<figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
	<footer> Defines a footer for the document or a section
	<header> Defines a header for the document or a section
	<style>
	#collapse * {
	display:block;
	list-style:none;
	cursor:pointer;
	text-transform:uppercase;
	}
	#collapse ul li {
	}
	.open{}
	<style>
	.rollover figure {
	position: relative;
	overflow: hidden;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	}

	.rollover figure figcaption {