added responsive navbar

This commit is contained in:
2021-01-24 00:28:13 +01:00
parent 2285a21721
commit 5018123615
6 changed files with 363 additions and 154 deletions

45
dist/index.html vendored
View File

@ -1,38 +1,31 @@
<!DOCTYPE html>
<html lang="de-DE">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass test</title>
<link rel="stylesheet" href="/dist/c5c675bb9c74ae17ec48e80f0197f4bf.css">
<style>
/* Dev Classes */
.display {
background-color: lightcoral;
border: 1px solid red;
text-align: center;
}
</style>
<link rel="stylesheet" href="/dist/ef19487056b129c8f3eda17f9543ab70.css">
</head>
<body>
<h1>Hello, World!</h1>
<header>
<h1 class="nav-logo-left">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
<nav class="nav-left">
<ul class="nav-left">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</nav>
</header>
<div class="container">
<h1>Grid System</h1>
<div class="row">
<div class="col-12 display"> 12 </div>
<div class="col-11 display"> 11 </div>
<div class="col-1 display"> 1 </div>
<div class="col-10 display"> 10 </div>
<div class="col-2 display"> 2 </div>
<div class="col-9 display"> 9 </div>
<div class="col-3 display"> 3 </div>
<div class="col-8 display"> 8 </div>
<div class="col-4 display"> 4 </div>
<div class="col-7 display"> 7 </div>
<div class="col-5 display"> 5 </div>
<div class="col-6 display"> 6 </div>
<div class="col-6 display"> 6 </div>
<div class="col-4"><h1>test</h1></div>
</div>
</div>
</body>