played around with navbars in bootstrap
|
Before Width: | Height: | Size: 325 KiB After Width: | Height: | Size: 325 KiB |
|
Before Width: | Height: | Size: 172 KiB After Width: | Height: | Size: 172 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 208 KiB After Width: | Height: | Size: 208 KiB |
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 919 KiB After Width: | Height: | Size: 919 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 586 KiB After Width: | Height: | Size: 586 KiB |
|
Before Width: | Height: | Size: 165 KiB After Width: | Height: | Size: 165 KiB |
|
Before Width: | Height: | Size: 178 KiB After Width: | Height: | Size: 178 KiB |
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 190 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
68
Bootstrap4_project/index.html
Normal 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
Bootstrap4_project/style.css
Normal 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
Normal file
|
After Width: | Height: | Size: 325 KiB |
BIN
Bootstrap4_tut/img/background2.png
Normal file
|
After Width: | Height: | Size: 172 KiB |
BIN
Bootstrap4_tut/img/background3.png
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
Bootstrap4_tut/img/bootstrap2.png
Normal file
|
After Width: | Height: | Size: 128 KiB |
BIN
Bootstrap4_tut/img/desk.png
Normal file
|
After Width: | Height: | Size: 208 KiB |
BIN
Bootstrap4_tut/img/gif/chicken.gif
Normal file
|
After Width: | Height: | Size: 1.0 MiB |
BIN
Bootstrap4_tut/img/gif/panda.gif
Normal file
|
After Width: | Height: | Size: 919 KiB |
BIN
Bootstrap4_tut/img/gif/poo.gif
Normal file
|
After Width: | Height: | Size: 1.1 MiB |
BIN
Bootstrap4_tut/img/gif/unicorn.gif
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
Bootstrap4_tut/img/logo.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
BIN
Bootstrap4_tut/img/mac.png
Normal file
|
After Width: | Height: | Size: 586 KiB |
BIN
Bootstrap4_tut/img/team1.png
Normal file
|
After Width: | Height: | Size: 165 KiB |
BIN
Bootstrap4_tut/img/team2.png
Normal file
|
After Width: | Height: | Size: 178 KiB |
BIN
Bootstrap4_tut/img/team3.png
Normal file
|
After Width: | Height: | Size: 190 KiB |
BIN
Bootstrap4_tut/img/w3newbie.png
Normal file
|
After Width: | Height: | Size: 4.8 KiB |
0
bootstrap_4_site_files/Bootstrap 4 Site Files/index.html → Bootstrap4_tut/index.html
Executable file → Normal file
0
bootstrap_4_site_files/Bootstrap 4 Site Files/style.css → Bootstrap4_tut/style.css
Executable file → Normal file
BIN
bootstrap_4_site_files/.DS_Store
vendored
1
bootstrap_4_site_files/.gitignore
vendored
@ -1 +0,0 @@
|
||||
node_modules
|
||||
@ -1,11 +0,0 @@
|
||||
sudo: false
|
||||
language: node_js
|
||||
node_js:
|
||||
- "node"
|
||||
install: npm install
|
||||
script:
|
||||
- npm test
|
||||
- gulp
|
||||
cache:
|
||||
directories:
|
||||
- node_modules
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||