owngeek owngeek

## 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">

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

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

## 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>

## pure_css_tab.css
    <style>

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

## 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>

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

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

## 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 ;

## jquery _loader.css
<style>
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;

## radio_button.css
<style>
body, html{
  height: 100%;
  background: #000;
	font-family: 'Lato', sans-serif;
}

.container{
  display: block;
  position: absolute;

## Progress_Bar.css
  <style>

@-webkit-keyframes grow-width {
  from {
    width: 0;
  }
}
@keyframes grow-width {
  from {
    width: 0;
	<!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">
	<style>
	* {
	box-sizing: border-box;
	}

	.container {
	background: #EEE;
	width: 50%;
	margin-bottom: 20px;
	}
	<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>

	* {
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}
	<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>
	body {
	background: #d2d9ca;
	}

	h1 {
	color: #eee;
	font: 30px Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-shadow: 0px 1px black;
	<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>
	.no-js #loader { display: none; }
	.js #loader { display: block; position: absolute; left: 100px; top: 0; }
	.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	<style>
	body, html{
	height: 100%;
	background: #000;
	font-family: 'Lato', sans-serif;
	}

	.container{
	display: block;
	position: absolute;
	<style>

	@-webkit-keyframes grow-width {
	from {
	width: 0;
	}
	}
	@keyframes grow-width {
	from {
	width: 0;