wendtth65566
/
MDT_5_2_projekt
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

played around with navbars in bootstrap

master
Thilo Wendt 3 years ago
parent
aa59f5c3b1
commit
035d2775b4
41 changed files with 373 additions and 83 deletions
Split View Show Diff Stats
  1. 0
    0
      Bootstrap4_project/img/background.png
  2. 0
    0
      Bootstrap4_project/img/background2.png
  3. 0
    0
      Bootstrap4_project/img/background3.png
  4. 0
    0
      Bootstrap4_project/img/bootstrap2.png
  5. 0
    0
      Bootstrap4_project/img/desk.png
  6. 0
    0
      Bootstrap4_project/img/gif/chicken.gif
  7. 0
    0
      Bootstrap4_project/img/gif/panda.gif
  8. 0
    0
      Bootstrap4_project/img/gif/poo.gif
  9. 0
    0
      Bootstrap4_project/img/gif/unicorn.gif
  10. 0
    0
      Bootstrap4_project/img/logo.png
  11. 0
    0
      Bootstrap4_project/img/mac.png
  12. 0
    0
      Bootstrap4_project/img/team1.png
  13. 0
    0
      Bootstrap4_project/img/team2.png
  14. 0
    0
      Bootstrap4_project/img/team3.png
  15. 0
    0
      Bootstrap4_project/img/w3newbie.png
  16. 68
    0
      Bootstrap4_project/index.html
  17. 305
    0
      Bootstrap4_project/style.css
  18. BIN
      Bootstrap4_tut/img/background.png
  19. BIN
      Bootstrap4_tut/img/background2.png
  20. BIN
      Bootstrap4_tut/img/background3.png
  21. BIN
      Bootstrap4_tut/img/bootstrap2.png
  22. BIN
      Bootstrap4_tut/img/desk.png
  23. BIN
      Bootstrap4_tut/img/gif/chicken.gif
  24. BIN
      Bootstrap4_tut/img/gif/panda.gif
  25. BIN
      Bootstrap4_tut/img/gif/poo.gif
  26. BIN
      Bootstrap4_tut/img/gif/unicorn.gif
  27. BIN
      Bootstrap4_tut/img/logo.png
  28. BIN
      Bootstrap4_tut/img/mac.png
  29. BIN
      Bootstrap4_tut/img/team1.png
  30. BIN
      Bootstrap4_tut/img/team2.png
  31. BIN
      Bootstrap4_tut/img/team3.png
  32. BIN
      Bootstrap4_tut/img/w3newbie.png
  33. 0
    0
      Bootstrap4_tut/index.html
  34. 0
    0
      Bootstrap4_tut/style.css
  35. BIN
      bootstrap_4_site_files/.DS_Store
  36. 0
    1
      bootstrap_4_site_files/.gitignore
  37. 0
    11
      bootstrap_4_site_files/.travis.yml
  38. BIN
      bootstrap_4_site_files/Bootstrap 4 Site Files/.DS_Store
  39. BIN
      bootstrap_4_site_files/Bootstrap 4 Site Files/img/.DS_Store
  40. BIN
      bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/.DS_Store
  41. 0
    71
      bootstrap_4_site_files/Build-4-Websites.html

bootstrap_4_site_files/Bootstrap 4 Site Files/img/background.png → Bootstrap4_project/img/background.png View File


bootstrap_4_site_files/Bootstrap 4 Site Files/img/background2.png → Bootstrap4_project/img/background2.png View File


bootstrap_4_site_files/Bootstrap 4 Site Files/img/background3.png → Bootstrap4_project/img/background3.png View File


bootstrap_4_site_files/Bootstrap 4 Site Files/img/bootstrap2.png → Bootstrap4_project/img/bootstrap2.png View File


bootstrap_4_site_files/Bootstrap 4 Site Files/img/desk.png → Bootstrap4_project/img/desk.png View File


bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/chicken.gif → Bootstrap4_project/img/gif/chicken.gif View File


bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/panda.gif → Bootstrap4_project/img/gif/panda.gif View File


bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/poo.gif → Bootstrap4_project/img/gif/poo.gif View File


bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/unicorn.gif → Bootstrap4_project/img/gif/unicorn.gif View File


bootstrap_4_site_files/Bootstrap 4 Site Files/img/logo.png → Bootstrap4_project/img/logo.png View File


bootstrap_4_site_files/Bootstrap 4 Site Files/img/mac.png → Bootstrap4_project/img/mac.png View File


bootstrap_4_site_files/Bootstrap 4 Site Files/img/team1.png → Bootstrap4_project/img/team1.png View File


bootstrap_4_site_files/Bootstrap 4 Site Files/img/team2.png → Bootstrap4_project/img/team2.png View File


bootstrap_4_site_files/Bootstrap 4 Site Files/img/team3.png → Bootstrap4_project/img/team3.png View File


bootstrap_4_site_files/Bootstrap 4 Site Files/img/w3newbie.png → Bootstrap4_project/img/w3newbie.png View File


+ 68
- 0
Bootstrap4_project/index.html View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<!-- Navbar -->
<nav class="navbar navbar-expand-sm navbar-dark ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- content -->
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
hello world
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-">Primary</button>
</div>
</div>
</div>
</body>
</html>

+ 305
- 0
Bootstrap4_project/style.css View File

@@ -0,0 +1,305 @@
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

html, body {
height: 100%;
width: 100%;
font-family: 'Poppins', sans-serif;
color: #222;
}

.navbar {
padding: .8rem; // rem is based on font size so if base font size is 16px 1 rem is 16px
background-color: green;
}

.navbar-dark {
background-color: blue;
}

.navbar-light {
background-color: green;
}

.navbar-nav li {
padding-right: 20px;
}

.nav-link {
font-size: 1.1em;
}

.carousel-inner img {
width: 100%;
height: 100%;
}

.carousel-caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

.carousel-caption h1 {
font-size: 500%;
text-transform: uppercase;
text-shadow: 1px 1px 15px #000;
}

.carousel-caption h3 {
font-size: 200%;
font-weight: 500;
text-shadow: 1px 1px 10px #000;
padding-bottom: 1rem;
}

.btn-primary {
background-color: #6648b1;
border: 1px solid #563d7c;
}

.btn-primary:hover {
background-color: #563d7c;
border: 1px solid #563d7c;
}

.jumbotron {
padding: 1rem;
border-radius: 0;
}

.padding {
padding-bottom: 2rem;
}

.welcome {
width: 75%;
margin: 0 auto;
padding-top: 2rem;
}

.welcome hr {
border-top: 2px solid #b4b4b4;
width: 95%;
margin-top: .3rem;
margin-bottom: 1rem;
}

.fa-code {
color: #e54d26;
}

.fa-bookmark {
color: #563d72;
}

.fa-css3 {
color: #2163af;
}

.fa-code, .fa-bookmark, .fa-css3 {
font-size: 4em;
margin: 1rem;
}

.fun {
width: 100%;
margin-bottom: 2rem;
}

.gif {
max-width: 100%
}

.social a {
font-size: 4.5em;
padding: 3rem;
}

.fa-facebook {
color: #3b5998;
}

.fa-twitter {
color: #00aced;
}

.fa-instagram {
color: #517fa4;
}

.fa-google-plus-g {
color: #dd4b39;
}

.fa-youtube {
color: #bb0000;
}

.fa-facebook:hover,
.fa-twitter:hover,
.fa-instagram:hover,
.fa-google-plus-g:hover,
.fa-youtube:hover {
color: #d5d5d5;
}

footer {
padding-top: 2rem;
background: #3f3f3f;
color: #d5d5d5;
}

hr.light {
border-top: 1px solid #d5d5d5;
width: 75%;
margin-top: .8rem;
margin-bottom: 1rem;
}

footer a {
color: #d5d5d5
}

hr.light-100 {
border-top: 1px solid #d5d5d5;
width: 100%;
margin-top: .8rem;
margin-bottom: 1rem;
}

/*---Media Queries --*/
@media (max-width: 992px) {
.social a {
font-size: 4em;
padding: 2rem;
}

}
@media (max-width: 768px) {
.carousel-caption {
top: 45%;
}

.carousel-caption h1 {
font-size: 350%;
}

.carousel-caption h3 {
font-size: 140%;
font-weight: 400;
padding-bottom: .2rem;
}

.carousel-caption .btn {
font-size: 95%;
padding: 8px 14px;
}

.display-4 {
font-size: 200%;
}

.social a {
font-size: 2.5em;
padding: 1.4rem;
}
}
@media (max-width: 576px) {
.carousel-caption {
top: 40%;
}

.carousel-caption h1 {
font-size: 250%;
}

.carousel-caption h3 {
font-size: 110%;
}

.carousel-caption .btn {
font-size: 90%;
padding: 4px 8px;
}

.carousel-indicators {
display: none;
}

.social a {
font-size: 2em;
padding: .7rem;
}
}


/*---Firefox Bug Fix --*/
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
position: relative;
width: 100%;
height: 60%;
margin: 0!important;
}
.fixed-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#fixed {
background-image: url('img/mac.png');
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
padding: 1rem;
}





/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/









BIN
Bootstrap4_tut/img/background.png View File


BIN
Bootstrap4_tut/img/background2.png View File


BIN
Bootstrap4_tut/img/background3.png View File


BIN
Bootstrap4_tut/img/bootstrap2.png View File


BIN
Bootstrap4_tut/img/desk.png View File


BIN
Bootstrap4_tut/img/gif/chicken.gif View File


BIN
Bootstrap4_tut/img/gif/panda.gif View File


BIN
Bootstrap4_tut/img/gif/poo.gif View File


BIN
Bootstrap4_tut/img/gif/unicorn.gif View File


BIN
Bootstrap4_tut/img/logo.png View File


BIN
Bootstrap4_tut/img/mac.png View File


BIN
Bootstrap4_tut/img/team1.png View File


BIN
Bootstrap4_tut/img/team2.png View File


BIN
Bootstrap4_tut/img/team3.png View File


BIN
Bootstrap4_tut/img/w3newbie.png View File


bootstrap_4_site_files/Bootstrap 4 Site Files/index.html → Bootstrap4_tut/index.html View File


bootstrap_4_site_files/Bootstrap 4 Site Files/style.css → Bootstrap4_tut/style.css View File


BIN
bootstrap_4_site_files/.DS_Store View File


+ 0
- 1
bootstrap_4_site_files/.gitignore View File

@@ -1 +0,0 @@
node_modules

+ 0
- 11
bootstrap_4_site_files/.travis.yml View File

@@ -1,11 +0,0 @@
sudo: false
language: node_js
node_js:
- "node"
install: npm install
script:
- npm test
- gulp
cache:
directories:
- node_modules

BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/.DS_Store View File


BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/.DS_Store View File


BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/.DS_Store View File


+ 0
- 71
bootstrap_4_site_files/Build-4-Websites.html View File

@@ -1,71 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<style>

html, body {
margin: 0;
}
.youtube-tutorial {
min-width: 100%;
z-index: 100;
transition: all 1s ease;
}
.youtube-tutorial:hover {
opacity: .8;
transition: all 1s ease;
}
.btn {
border-width: .2rem;
transition: all 1s ease;
}
.btn:hover {
transition: all 1s ease;
}
</style>
<body>


<!-----------------------------------------------------------
VIEW IN BROSWER: BUILD 4 WEBSITES WITH HTML, CSS & BOOTSTRAP
------------------------------------------------------------->
<h1 class="display-5 text-center font-weight-bold mt-4">Build 4 Websites With HTML, CSS & Bootstrap</h1>
<h4 class="text-center text-uppercase py-3">Drew's #1 Trending YouTube Tutorial Video Series</h4>
<div class="text-center text-uppercase text-light py-2 mb-5"><a class="btn btn-outline-dark btn-lg" href="http://bit.ly/build-4-websites-html">4 Website YouTube Series</a></div>


<!-- View in Browser: Drew's #1 Trending YouTube Tutorial -->
<div class="youtube-tutorial mb-5">
<a href="http://bit.ly/build-4-websites-html" target="_blank" style="z-index: 999!important; cursor: pointer!important;"><img src="https://www.w3newbie.com/wp-content/uploads/nuno-youtube-4-websites.png" style="max-width: 100%; min-width: 100%;"></a>
</div>
<!-- End View in Browser: Drew's #1 Trending YouTube Tutorial -->


</body>
</html>

























Write Preview
Loading…
Cancel
Save