jrichardsz/html snippets - 02 columns.html

## html snippets - 02 columns.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
/*https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_two_columns*/
/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Two Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

## html snippets - big button.html
.square {
  background: #000;
  height: 200px;
  width: 380px;
  border-radius: 20px;
  color: #fff;
  text-align: center;
}
.button:hover {
  background-color: #000;
}
.sub-content {
  font-size: 25px;
/*   text-shadow: 0 0 10px white; */
/*   font-style: oblique; */
  font-family: 'Prosto One;
}

.main-content {
  margin-top: 30px;
  font-size: 45px;
  font-family: 'Prosto One';
/*   text-shadow: 0 0 20px white; */
}

.align-content {
  position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.button:active {
  background-color: #000;
  box-shadow: 0 5px #383838;
  transform: translateY(4px);
}
.button {
  box-shadow: 0 9px #383838;
  cursor: pointer;
}

<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prosto+One" rel="stylesheet">
<!-- <div class="triangle-with-shadow"></div> -->
<div class="square button">
  <div class="align-content">
    <span class="main-content">Create Repair</span><br>
    <span class="sub-content">The Mobile Shop </span>
  </div>
</div>

## html split panes - v1.html
<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			font-family: Arial;
			color: white;
		}

		.split {
			height: 100%;
			width: 50%;
			position: fixed;
			z-index: 1;
			top: 0;
			overflow-x: hidden;
			padding-top: 20px;
		}

		.left {
			left: 0;
			background-color: #111;
		}

		.right {
			right: 0;
		}

		.centered {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
		}

		.centered img {
			width: 150px;
			border-radius: 50%;
		}


		#parent {
			background: #999;
			padding: 10px;
		}

		.child {
			background: #ccc;
			height: 42vh;
			margin: 10px;
		}

		.refresh {
			margin: 10px;width: 97%;
		}
	</style>
</head>

<body>

	<div class="split left">
		<div id="parent">

			<div class="child">
			</div>
			<div class="child">
			</div>
			<button class="refresh" type="button">Refresh</button>
		</div>
	</div>

	<div class="split right">

	</div>

</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	* {
	box-sizing: border-box;
	}
	/https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_two_columns/
	/* Create two equal columns that floats next to each other */
	.column {
	float: left;
	width: 50%;
	padding: 10px;
	height: 300px; /* Should be removed. Only for demonstration */
	}

	/* Clear floats after the columns */
	.row:after {
	content: "";
	display: table;
	clear: both;
	}
	</style>
	</head>
	<body>

	<h2>Two Equal Columns</h2>

	<div class="row">
	<div class="column" style="background-color:#aaa;">
	<h2>Column 1</h2>
	<p>Some text..</p>
	</div>
	<div class="column" style="background-color:#bbb;">
	<h2>Column 2</h2>
	<p>Some text..</p>
	</div>
	</div>

	</body>
	</html>
	.square {
	background: #000;
	height: 200px;
	width: 380px;
	border-radius: 20px;
	color: #fff;
	text-align: center;
	}
	.button:hover {
	background-color: #000;
	}
	.sub-content {
	font-size: 25px;
	/* text-shadow: 0 0 10px white; */
	/* font-style: oblique; */
	font-family: 'Prosto One;
	}

	.main-content {
	margin-top: 30px;
	font-size: 45px;
	font-family: 'Prosto One';
	/* text-shadow: 0 0 20px white; */
	}

	.align-content {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	}
	.button:active {
	background-color: #000;
	box-shadow: 0 5px #383838;
	transform: translateY(4px);
	}
	.button {
	box-shadow: 0 9px #383838;
	cursor: pointer;
	}

	<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Prosto+One" rel="stylesheet">
	<!-- <div class="triangle-with-shadow"></div> -->
	<div class="square button">
	<div class="align-content">
	<span class="main-content">Create Repair</span><br>
	<span class="sub-content">The Mobile Shop </span>
	</div>
	</div>