kayode-adechinan/html.snippet

## html.snippet
# center in page
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Dead center!</title>
    <style>
      body {
        margin: 0;
      }

      .center-me {
        display: flex;
        justify-content: center;
        align-items: center;

        height: 100vh;
      }
    </style>
  </head>
  <body>

    <div class="center-me">
      <p>😇 Bonjour center!</p>
    </div>

  </body>
</html>
```


# sticky footer
```html
<div id="body" class="d-flex flex-column">
<div id="page-content">
  <div class="container text-center">
    <div class="row justify-content-center">
      <div class="col-md-7">
        <h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
        <p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will have a flexbox enabled sticky footer for your website!</p>
      </div>
    </div>
  </div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
  <div class="container text-center">
    <small>Copyright &copy; Your Website</small>
  </div>
</footer>
</div>
```
```css
#body {
  min-height: 100vh;
}

#page-content {
  flex: 1 0 auto;
}


/* Other Classes for Page Styling */

#body {
  background: #007bff;
  background: linear-gradient(to right, #0062E6, #33AEFF);
}
```

# remove bootstrap blue glow
```css
input, textarea, select {
outline: none;
border:1px solid #ccc !important;
box-shadow:none !important;
}
```

# Make a <td> span the entire row in a table
```html
<table width="900px" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" colspan="3">check</td>
    </tr>
    <tr>
        <td align="center">check</td>
        <td align="center">check</td>
        <td align="center">check</td>
    </tr>
</table>
```
	# center in page
	```html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Dead center!</title>
	<style>
	body {
	margin: 0;
	}

	.center-me {
	display: flex;
	justify-content: center;
	align-items: center;

	height: 100vh;
	}
	</style>
	</head>
	<body>

	<div class="center-me">
	<p>😇 Bonjour center!</p>
	</div>

	</body>
	</html>
	```


	# sticky footer
	```html
	<div id="body" class="d-flex flex-column">
	<div id="page-content">
	<div class="container text-center">
	<div class="row justify-content-center">
	<div class="col-md-7">
	<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
	<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will have a flexbox enabled sticky footer for your website!</p>
	</div>
	</div>
	</div>
	</div>
	<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
	<div class="container text-center">
	<small>Copyright © Your Website</small>
	</div>
	</footer>
	</div>
	```
	```css
	#body {
	min-height: 100vh;
	}

	#page-content {
	flex: 1 0 auto;
	}


	/* Other Classes for Page Styling */

	#body {
	background: #007bff;
	background: linear-gradient(to right, #0062E6, #33AEFF);
	}
	```

	# remove bootstrap blue glow
	```css
	input, textarea, select {
	outline: none;
	border:1px solid #ccc !important;
	box-shadow:none !important;
	}
	```

	# Make a <td> span the entire row in a table
	```html
	<table width="900px" border="0" cellspacing="0" cellpadding="0">
	<tr>
	<td align="center" colspan="3">check</td>
	</tr>
	<tr>
	<td align="center">check</td>
	<td align="center">check</td>
	<td align="center">check</td>
	</tr>
	</table>
	```