commit
a8a09bdef8
53 changed files with 719 additions and 0 deletions
BIN
__MACOSX/._Bootstrap 4 Site Files
View File
BIN
__MACOSX/Bootstrap 4 Site Files/._.DS_Store
View File
BIN
__MACOSX/Bootstrap 4 Site Files/._.gitignore
View File
BIN
__MACOSX/Bootstrap 4 Site Files/._.travis.yml
View File
BIN
__MACOSX/Bootstrap 4 Site Files/._Bootstrap 4 Site Files
View File
BIN
__MACOSX/Bootstrap 4 Site Files/._Build-4-Websites.html
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/._.DS_Store
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/._img
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/._index.html
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/._style.css
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._.DS_Store
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._background.png
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._background2.png
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._background3.png
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._bootstrap2.png
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._desk.png
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._gif
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._logo.png
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._mac.png
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._team1.png
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._team2.png
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._team3.png
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._w3newbie.png
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/gif/._.DS_Store
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/gif/._chicken.gif
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/gif/._panda.gif
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/gif/._poo.gif
View File
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/gif/._unicorn.gif
View File
BIN
bootstrap_4_site_files/.DS_Store
View File
+ 1
- 0
bootstrap_4_site_files/.gitignore
View File
| @@ -0,0 +1 @@ | |||
| node_modules | |||
+ 11
- 0
bootstrap_4_site_files/.travis.yml
View File
| @@ -0,0 +1,11 @@ | |||
| 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/background.png
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/background2.png
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/background3.png
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/bootstrap2.png
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/desk.png
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/.DS_Store
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/chicken.gif
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/panda.gif
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/poo.gif
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/unicorn.gif
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/logo.png
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/mac.png
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/team1.png
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/team2.png
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/team3.png
View File
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/w3newbie.png
View File
+ 340
- 0
bootstrap_4_site_files/Bootstrap 4 Site Files/index.html
View File
| @@ -0,0 +1,340 @@ | |||
| <!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> | |||
| <body> | |||
| <!-- Navigation --> | |||
| <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top"> | |||
| <div class="container-fluid"> | |||
| <a class="navbar-brand" href="#"><img src="img/logo.png"></a> | |||
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> | |||
| <!-- id is referenced in div for the navbar itself --> | |||
| <span class="navbar-toggler-icon"></span> | |||
| </button> | |||
| <div class="collapse navbar-collapse" id="navbarResponsive"> | |||
| <!-- ml-auto for right hand alignment of the navbar --> | |||
| <ul class="navbar-nav ml-auto"> | |||
| <li class="nav-item active"> | |||
| <!-- The active class highlights the link --> | |||
| <a class="nav-link" href="#">Home</a> | |||
| </li> | |||
| <li class="nav-item"> | |||
| <a class="nav-link" href="#">About</a> | |||
| </li> | |||
| <li class="nav-item"> | |||
| <a class="nav-link" href="#">Services</a> | |||
| </li> | |||
| <li class="nav-item"> | |||
| <a class="nav-link" href="#">Team</a> | |||
| </li> | |||
| <li class="nav-item"> | |||
| <a class="nav-link" href="#">Contact</a> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| </div> | |||
| </nav> | |||
| <!--- Image Slider --> | |||
| <!-- see https://www.w3schools.com/bootstrap/bootstrap_carousel.asp for explanation | |||
| in brief: carousel for rotating images | |||
| slide for slide effect | |||
| data-ride -> animation starts imdiatly | |||
| id is necessary to be referenced--> | |||
| <div id="slides" class="carousel slide" data-ride="carousel"> | |||
| <ul class="carousel-indicators"> | |||
| <!-- data-target references to the element that gets changed in this case the slider | |||
| data-slide-to: next slide--> | |||
| <li data-target="#slides" data-slide-to="0" class="active"></li> | |||
| <li data-target="#slides" data-slide-to="1"></li> | |||
| <li data-target="#slides" data-slide-to="2"></li> | |||
| </ul> | |||
| <div class="carousel-inner"> | |||
| <div class="carousel-item active"> | |||
| <img src="img/background.png"> | |||
| <div class="carousel-caption"> | |||
| <h1 class="display-2">Bootstrap</h1> | |||
| <h3>Complete website Layout</h3> | |||
| <button type="button" class="btn btn-outline-light btn-lg">VIEW DEMO</button> | |||
| <button type="button" class="btn btn-primary btn-lg">Get Started</button> | |||
| </div> | |||
| </div> | |||
| <div class="carousel-item"> | |||
| <img src="img/background2.png"> | |||
| </div> | |||
| <div class="carousel-item"> | |||
| <img src="img/background3.png"> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!--- Jumbotron --> | |||
| <div class="container-fluid"> | |||
| <div class="row jumbotron"> | |||
| <!-- how many columns at which width --> | |||
| <div class="col-xs-12 cl-sm-12 col-md-9 col-lg-9 col-xl-10"> | |||
| <!-- class lead for lightweight --> | |||
| <p class="lead">Lorem ipsum dolor sit amet, consetetur | |||
| sadipscing elitr, sed diam nonumy eirmod tempor | |||
| invidunt ut labore et dolore magna aliquyam erat, sed | |||
| diam voluptua. At vero eos et accusam et justo duo | |||
| dolores et ea rebum. Stet clita kasd gubergren, no sea | |||
| takimata sanctus est Lorem ipsum dolor sit amet. </p> | |||
| </div> | |||
| <div class="col-xs-12 cl-sm-12 col-md-3 col-lg-3 col-xl-2"> | |||
| <a href="#"><button class="btn btn-outline-secondary btn-lg">Web Hosting</button></a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!--- Welcome Section --> | |||
| <div class="container-fluid padding"> | |||
| <div class="row welcome text-center"> | |||
| <div class="col-12"> | |||
| <h1 class="display-4">Built with ease</h1> | |||
| </div> | |||
| <hr> | |||
| <div class="col-12"> | |||
| <p class="lead"> Lorem ipsum dolor sit amet, consetetur | |||
| sadipscing elitr, sed diam nonumy eirmod tempor | |||
| invidunt ut labore et dolore magna aliquyam erat, sed | |||
| diam voluptua.</p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!--- Three Column Section --> | |||
| <div class="container-fluid padding"> | |||
| <div class="row text-center padding"> | |||
| <div class="col-xs-12 col-sm-6 col-md-4"> | |||
| <i class="fas fa-code"></i> | |||
| <h3>HTML5</h3> | |||
| <p>Built with HTML5</p> | |||
| </div> | |||
| <div class="col-xs-12 col-sm-6 col-md-4"> | |||
| <i class="fas fa-bookmark"></i> | |||
| <h3>BOOTSRAP</h3> | |||
| <p>Built with Bootstrap 4</p> | |||
| </div> | |||
| <div class="col-sm-12 col-md-4"> | |||
| <i class="fab fa-css3"></i> | |||
| <h3>CSS3</h3> | |||
| <p>Built with CSS3</p> | |||
| </div> | |||
| </div> | |||
| <hr class="my-4"> | |||
| </div> | |||
| <!--- Two Column Section --> | |||
| <div class="container-fluid"> | |||
| <div class="row padding"> | |||
| <div class="col-md-12 col-lg-6"> | |||
| <h2>If you build it...</h2> | |||
| <p>Lorem ipsum dolor sit amet, consetetur | |||
| sadipscing elitr, sed diam nonumy eirmod tempor | |||
| invidunt ut labore et dolore magna aliquyam erat, sed | |||
| diam voluptua.</p> | |||
| <p>Lorem ipsum dolor sit amet, consetetur | |||
| sadipscing elitr, sed diam nonumy eirmod tempor | |||
| invidunt ut labore et dolore magna aliquyam erat, sed | |||
| diam voluptua.</p> | |||
| <p>Lorem ipsum dolor sit amet, consetetur | |||
| sadipscing elitr, sed diam nonumy eirmod tempor | |||
| invidunt ut labore et dolore magna aliquyam erat, sed | |||
| diam voluptua.</p> | |||
| <br> | |||
| <a href="#" class="btn btn-primary">Learn More</a> | |||
| </div> | |||
| <div class="col-lg-6"> | |||
| <img src="img/desk.png" class="img-fluid"> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <hr class="my-4"> | |||
| <!--- Fixed background --> | |||
| <figure> | |||
| <div class="fixed-wrap"> | |||
| <div id="fixed"></div> | |||
| </div> | |||
| </figure> | |||
| <!--- Emoji Section --> | |||
| <button class="fun" data-toggle="collapse" data-target="#emoji">Click for fun</button> | |||
| <div id ="emoji" class="collapse"> | |||
| <div class="container-fluid padding"> | |||
| <div class="row text-center"> | |||
| <div class="col-sm-6 col-md-3"> | |||
| <img class="gif" src="img/gif/panda.gif"> | |||
| </div> | |||
| <div class="col-sm-6 col-md-3"> | |||
| <img class="gif" src="img/gif/poo.gif"> | |||
| </div> | |||
| <div class="col-sm-6 col-md-3"> | |||
| <img class="gif" src="img/gif/unicorn.gif"> | |||
| </div> | |||
| <div class="col-sm-6 col-md-3"> | |||
| <img class="gif" src="img/gif/chicken.gif"> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!--- Meet the team --> | |||
| <div class="container-fluid padding"> | |||
| <div class="row welcome text-center"> | |||
| <div class="col-12"> | |||
| <h1 class="display-4">Meet the Team</h1> | |||
| <hr> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!--- Cards --> | |||
| <div class="container-fluid padding"> | |||
| <div class="row padding"> | |||
| <div class="col-md-4"> | |||
| <div class="card"> | |||
| <img class="card-img-top" src="img/team1.png"> | |||
| <div class="card-body"> | |||
| <h4 class="card-title">John Doe</h4> | |||
| <p class="card-text">Lorem ipsum dolor sit amet, consetetur | |||
| sadipscing elitr. </p> | |||
| <a href="#" class="btn btn-outline-secondary">See Profile</a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="col-md-4"> | |||
| <div class="card"> | |||
| <img class="card-img-top" src="img/team2.png"> | |||
| <div class="card-body"> | |||
| <h4 class="card-title">Mary Jo</h4> | |||
| <p class="card-text">Lorem ipsum dolor sit amet, consetetur | |||
| sadipscing elitr. </p> | |||
| <a href="#" class="btn btn-outline-secondary">See Profile</a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="col-md-4"> | |||
| <div class="card"> | |||
| <img class="card-img-top" src="img/team3.png"> | |||
| <div class="card-body"> | |||
| <h4 class="card-title">Phil Ho</h4> | |||
| <p class="card-text">Lorem ipsum dolor sit amet, consetetur | |||
| sadipscing elitr. </p> | |||
| <a href="#" class="btn btn-outline-secondary">See Profile</a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!--- Two Column Section --> | |||
| <div class="container-fluid"> | |||
| <div class="row padding"> | |||
| <div class="col-md-12 col-lg-6"> | |||
| <h2>Our philosophy</h2> | |||
| <p>Lorem ipsum dolor sit amet, consetetur | |||
| sadipscing elitr, sed diam nonumy eirmod tempor | |||
| invidunt ut labore et dolore magna aliquyam erat, sed | |||
| diam voluptua.</p> | |||
| <p>Lorem ipsum dolor sit amet, consetetur | |||
| sadipscing elitr, sed diam nonumy eirmod tempor | |||
| invidunt ut labore et dolore magna aliquyam erat, sed | |||
| diam voluptua. Lorem ipsum dolor sit amet, consetetur | |||
| sadipscing elitr, sed diam nonumy eirmod tempor | |||
| invidunt ut labore et dolore magna aliquyam erat, sed | |||
| diam voluptua.</p> | |||
| </div> | |||
| <div class="col-lg-6"> | |||
| <img src="img/bootstrap2.png" class="img-fluid"> | |||
| </div> | |||
| </div> | |||
| <hr class="my-4"> | |||
| </div> | |||
| <!--- Connect --> | |||
| <div class="container-fluid padding"> | |||
| <div class="row text-center padding"> | |||
| <div class="col-12"> | |||
| <h2>Connect</h2> | |||
| </div> | |||
| <div class="col-12 social padding"> | |||
| <a href="#"><i class="fab fa-facebook"></i></a> | |||
| <a href="#"><i class="fab fa-twitter"></i></a> | |||
| <a href="#"><i class="fab fa-google-plus-g"></i></a> | |||
| <a href="#"><i class="fab fa-instagram"></i></a> | |||
| <a href="#"><i class="fab fa-youtube"></i></a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!--- Footer --> | |||
| <footer> | |||
| <div class="container-fluid padding"> | |||
| <div class="row text-center"> | |||
| <div class="col-md-4"> | |||
| <img src="img/w3newbie.png"> | |||
| <hr class="light"> | |||
| <p>0160 45 72 775 </p> | |||
| <p>mail@example.com</p> | |||
| <p>Hauptstraße 32</p> | |||
| <p>30916 Isernhagen</p> | |||
| </div> | |||
| <div class="col-md-4"> | |||
| <hr class="light"> | |||
| <h5>Our hours</h5> | |||
| <hr class="light"> | |||
| <p>Monday: 9am - 6pm</p> | |||
| <p>Saturday: 10am - 3pm </p> | |||
| <p>Sunday: closed </p> | |||
| </div> | |||
| <div class="col-md-4"> | |||
| <hr class="light"> | |||
| <h5>Service Area</h5> | |||
| <p>12345, Musterhausen</p> | |||
| <p>12345, Musterhausen</p> | |||
| <p>12345, Musterhausen</p> | |||
| <p>12345, Musterhausen</p> | |||
| </div> | |||
| <div class="col-12"> | |||
| <hr class="light-100"> | |||
| <h5>© thilo-wendt.de</h5> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </footer> | |||
| </body> | |||
| </html> | |||
| <!--- Check out my courses! --> | |||
+ 296
- 0
bootstrap_4_site_files/Bootstrap 4 Site Files/style.css
View File
| @@ -0,0 +1,296 @@ | |||
| @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 | |||
| } | |||
| .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) { ... } | |||
| */ | |||
+ 71
- 0
bootstrap_4_site_files/Build-4-Websites.html
View File
| @@ -0,0 +1,71 @@ | |||
| <!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> | |||
BIN
tutorial-29.zip
View File
Loading…