updated style, navbar

This commit is contained in:
oliver 2019-07-11 18:59:27 +02:00
parent 3c3385a90d
commit 3dd5f9fd0d
2 changed files with 90 additions and 58 deletions

View file

@ -70,6 +70,7 @@ body {
.text-white-50 { color: rgba(255, 255, 255, .5); } .text-white-50 { color: rgba(255, 255, 255, .5); }
.bg-purple { background-color: #6f42c1; } .bg-purple { background-color: #6f42c1; }
.bg-blue { background-color: #4854ff; }
.lh-100 { line-height: 1; } .lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; } .lh-125 { line-height: 1.25; }

View file

@ -29,6 +29,7 @@
</style> </style>
<!-- Custom styles for this template --> <!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet"> <link href="css/offcanvas.css" rel="stylesheet">
<link href="css/dashboard.css" rel="stylesheet">
<title>BlueWeather</title> <title>BlueWeather</title>
@ -39,46 +40,76 @@
<body class="bg-light"> <body class="bg-light">
<main role="main" class="container"> <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm"> <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">BlueWeather</a>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<main role="main" class="container">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-blue rounded shadow-sm">
<img class="mr-3" src="/docs/4.3/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48"> <img class="mr-3" src="/docs/4.3/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
<div class="lh-100"> <div class="lh-100">
<h6 class="mb-0 text-white lh-100">Bootstrap</h6> <h6 class="mb-0 text-white lh-100">BlueWeather</h6>
<small>Since 2011</small> <small>Since 2018</small>
</div> </div>
</div> </div>
<div class="my-3 p-3 bg-white rounded shadow-sm"> <div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6> <h6 class="border-bottom border-gray pb-2 mb-0">current places</h6>
<div class="media text-muted pt-3"> <div class="media text-muted pt-3">
<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32"><title>Placeholder</title><rect width="100%" height="100%" fill="#007bff"/><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text></svg> <svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#007bff" /><text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text>
</svg>
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"> <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@place</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus.
</p> </p>
</div> </div>
<div class="media text-muted pt-3"> <div class="media text-muted pt-3">
<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32"><title>Placeholder</title><rect width="100%" height="100%" fill="#e83e8c"/><text x="50%" y="50%" fill="#e83e8c" dy=".3em">32x32</text></svg> <svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#e83e8c" /><text x="50%" y="50%" fill="#e83e8c" dy=".3em">32x32</text>
</svg>
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"> <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@place</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus.
</p> </p>
</div> </div>
<div class="media text-muted pt-3"> <div class="media text-muted pt-3">
<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32"><title>Placeholder</title><rect width="100%" height="100%" fill="#6f42c1"/><text x="50%" y="50%" fill="#6f42c1" dy=".3em">32x32</text></svg> <svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#6f42c1" /><text x="50%" y="50%" fill="#6f42c1" dy=".3em">32x32</text>
</svg>
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"> <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@place</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus.
</p> </p>
</div> </div>
<small class="d-block text-right mt-3">
<a href="#">All updates</a>
</small>
</div> </div>
</main> </main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script> integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
<script src="offcanvas.js"></script></body> crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/docs/4.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"
crossorigin="anonymous"></script>
<script src="offcanvas.js"></script>
</body>
</body> </body>