Skip to content

Instantly share code, notes, and snippets.

@lebowvsky

lebowvsky/index.html

Last active January 3, 2020 15:22
Show Gist options
  • Save lebowvsky/c88f907abf83e214c3dd1009636e414f to your computer and use it in GitHub Desktop.
Save lebowvsky/c88f907abf83e214c3dd1009636e414f to your computer and use it in GitHub Desktop.
Download ZIP
intro to Boootstrap
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<main class="container-fluid">
<div class="row">
<div class="black col-xs-1"></div>
<div class="black col-xs-1 col-xs-offset-9"></div>
</div>
<div class="row">
<div class="black col-xs-1"></div>
<div class="orange col-xs-1 col-xs-offset-3"></div>
<div class="yellow col-xs-1"></div>
<div class="orange col-xs-1"></div>
<div class="black col-xs-1 col-xs-offset-3"></div>
</div>
<div class="row">
<div class="black col-xs-1"></div>
<div class="orange col-xs-1 col-xs-offset-2"></div>
<div class="yellow col-xs-1"></div>
<div class="black col-xs-1"></div>
<div class="yellow col-xs-1"></div>
<div class="orange col-xs-1"></div>
<div class="black col-xs-1 col-xs-offset-2"></div>
</div>
<div class="row">
<div class="black col-xs-2"></div>
<div class="orange col-xs-2"></div>
<div class="yellow col-xs-1"></div>
<div class="black col-xs-1"></div>
<div class="yellow col-xs-1"></div>
<div class="orange col-xs-2"></div>
<div class="black col-xs-2"></div>
</div>
<div class="row">
<div class="black col-xs-2"></div>
<div class="orange col-xs-1 col-xs-offset-1"></div>
<div class="yellow col-xs-1"></div>
<div class="black col-xs-1"></div>
<div class="yellow col-xs-1"></div>
<div class="orange col-xs-1"></div>
<div class="black col-xs-2 col-xs-offset-1"></div>
</div>
<div class="row">
<div class="black col-xs-3"></div>
<div class="orange col-xs-1 col-xs-offset-1"></div>
<div class="yellow col-xs-1"></div>
<div class="orange col-xs-1"></div>
<div class="black col-xs-3 col-xs-offset-1"></div>
</div>
<div class="row">
<div class="black col-xs-3 col-xs-offset-1"></div>
<div class="black col-xs-3 col-xs-offset-3"></div>
<div class="black col-xs-7 col-xs-offset-2"></div>
</div>
<div class="row">
<div class="black col-xs-5 col-xs-offset-3"></div>
</div>
<div class="row">
<div class="black col-xs-3 col-xs-offset-4"></div>
</div>
<div class="row">
<div class="black col-xs-3 col-xs-offset-4"></div>
</div>
<div class="row"></div>
</main>
</body>
</html>
Raw
style.css
div {
box-sizing: border-box;
border: 1px solid white;
height: 100px;
}
.black {
background-color: black;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment