Skip to content

Instantly share code, notes, and snippets.

@davidverhage

davidverhage/page.html

Created January 10, 2019 15:13
Show Gist options
  • Save davidverhage/d9c17a688fccfe3f28881b6f3c87bc49 to your computer and use it in GitHub Desktop.
Save davidverhage/d9c17a688fccfe3f28881b6f3c87bc49 to your computer and use it in GitHub Desktop.
Download ZIP
html
Raw
page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta description="Lang leve de lol">
<meta keywords="javascript,les,101,">
<title>Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap-theme.min.css"
integrity="sha384-jzngWsPS6op3fgRCDTESqrEJwRKck+CILhJVO5VvaAZCq8JYf8HsR/HPpBOOPZfR" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
<style type="text/css">
header.container-fluid, header.container {
background-color: black;
height: 70px;
display: block;
}
main.container-fluid, main.container {
background-color: red;
height: 75vh;
display: block;
}
footer.container-fluid, footer.container {
background-color: green;
position: relative;
margin-top: 3vh;
height: 60px;
}
</style>
</head>
<body>
<header class="container"><h1>Boom</h1></header>
<main class="container-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
style="background:white; height:20px;margin-bottom:10px;"></div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background:green; height:20px;margin-bottom:10px;"></div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background:yellow; height:20px;margin-bottom:10px;"></div>
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" style="background:brown; height:20px;margin-bottom:10px;">Hallo
wereld dit is BS3.4
</div>
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" style="background:rosybrown; height:20px;margin-bottom:10px;">Html
oefening geslaagd
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="background:sandybrown; height:20px;margin-bottom:10px;">
<img src="https://img-new.cgtrader.com/items/896560/43d63ea8db/gladiator-3d-model-low-poly-fbx-tga.jpg"
class="img-responsive"></div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
style="background:white; height:20px;margin-bottom:10px;"></div>
</main>
<footer class="container-fluid">Lorem ipsum dolrem &copy; 2019</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"
integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw"
crossorigin="anonymous"></script>
<script type="text/javascript">
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment