76 lines
3.2 KiB
HTML
76 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<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="scss/main.sass">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1 class="nav-logo">Logo</h1>
|
|
<input id="nav-toggle" type="checkbox" class="nav-toggle">
|
|
<label for="nav-toggle" class="nav-toggle-label">
|
|
<span></span>
|
|
</label>
|
|
<nav>
|
|
<ul>
|
|
<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>
|
|
<main>
|
|
<div class="container">
|
|
<h1 style="text-align: center;">Alert Elements</h1>
|
|
<div class="alert-primary"> test </div><br>
|
|
<div class="alert-danger"> test </div><br>
|
|
<div class="alert-warning"> test </div><br>
|
|
<div class="alert-success"> test </div>
|
|
<br>
|
|
<h1 style="text-align: center;">Notification Elements</h1>
|
|
<div class="notification-primary">
|
|
<h2>ein kleiner test satz</h2>
|
|
<span class="notification-body">Funktion test des objektes</span>
|
|
</div>
|
|
<br>
|
|
<div class="notification-danger">
|
|
<h2>ein kleiner test satz</h2>
|
|
<span class="notification-body">Funktion test des objektes</span>
|
|
</div>
|
|
<br>
|
|
<div class="notification-warning">
|
|
<h2>ein kleiner test satz</h2>
|
|
<span class="notification-body">Funktion test des objektes</span>
|
|
</div>
|
|
<br>
|
|
<div class="notification-success">
|
|
<h2>ein kleiner test satz</h2>
|
|
<span class="notification-body">Funktion test des objektes</span>
|
|
</div>
|
|
<br>
|
|
<h1 style="text-align: center;">CSS Grid</h1>
|
|
<div class="row">
|
|
<div class="col-12 display"><h1>12</h1></div>
|
|
<div class="col-11 display"><h1>11</h1></div>
|
|
<div class="col-1 display"><h1>1</h1></div>
|
|
<div class="col-10 display"><h1>10</h1></div>
|
|
<div class="col-2 display"><h1>2</h1></div>
|
|
<div class="col-9 display"><h1>9</h1></div>
|
|
<div class="col-3 display"><h1>3</h1></div>
|
|
<div class="col-8 display"><h1>8</h1></div>
|
|
<div class="col-4 display"><h1>4</h1></div>
|
|
<div class="col-7 display"><h1>7</h1></div>
|
|
<div class="col-5 display"><h1>5</h1></div>
|
|
<div class="col-6 display"><h1>6</h1></div>
|
|
<div class="col-6 display"><h1>6</h1></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<br><br><br>
|
|
<br><br><br>
|
|
</body>
|
|
</html> |