first commit homepage with bootstrap is already created
This commit is contained in:
commit
a8a09bdef8
BIN
__MACOSX/._Bootstrap 4 Site Files
Executable file
BIN
__MACOSX/._Bootstrap 4 Site Files
Executable file
Binary file not shown.
BIN
__MACOSX/Bootstrap 4 Site Files/._.DS_Store
Normal file
BIN
__MACOSX/Bootstrap 4 Site Files/._.DS_Store
Normal file
Binary file not shown.
BIN
__MACOSX/Bootstrap 4 Site Files/._.gitignore
Executable file
BIN
__MACOSX/Bootstrap 4 Site Files/._.gitignore
Executable file
Binary file not shown.
BIN
__MACOSX/Bootstrap 4 Site Files/._.travis.yml
Executable file
BIN
__MACOSX/Bootstrap 4 Site Files/._.travis.yml
Executable file
Binary file not shown.
BIN
__MACOSX/Bootstrap 4 Site Files/._Bootstrap 4 Site Files
Executable file
BIN
__MACOSX/Bootstrap 4 Site Files/._Bootstrap 4 Site Files
Executable file
Binary file not shown.
BIN
__MACOSX/Bootstrap 4 Site Files/._Build-4-Websites.html
Normal file
BIN
__MACOSX/Bootstrap 4 Site Files/._Build-4-Websites.html
Normal file
Binary file not shown.
Binary file not shown.
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/._img
Executable file
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/._img
Executable file
Binary file not shown.
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/._index.html
Executable file
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/._index.html
Executable file
Binary file not shown.
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/._style.css
Executable file
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/._style.css
Executable file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._gif
Executable file
BIN
__MACOSX/Bootstrap 4 Site Files/Bootstrap 4 Site Files/img/._gif
Executable file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
bootstrap_4_site_files/.DS_Store
vendored
Normal file
BIN
bootstrap_4_site_files/.DS_Store
vendored
Normal file
Binary file not shown.
1
bootstrap_4_site_files/.gitignore
vendored
Executable file
1
bootstrap_4_site_files/.gitignore
vendored
Executable file
@ -0,0 +1 @@
|
||||
node_modules
|
||||
11
bootstrap_4_site_files/.travis.yml
Executable file
11
bootstrap_4_site_files/.travis.yml
Executable 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
vendored
Normal file
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/.DS_Store
vendored
Normal file
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/background.png
Normal file
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 325 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/bootstrap2.png
Normal file
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/bootstrap2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/desk.png
Normal file
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/desk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/.DS_Store
vendored
Normal file
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/.DS_Store
vendored
Normal file
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/panda.gif
Normal file
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/panda.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 919 KiB |
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/poo.gif
Normal file
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/gif/poo.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/logo.png
Normal file
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/mac.png
Normal file
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/mac.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 586 KiB |
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/team1.png
Normal file
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/team1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/team2.png
Normal file
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/team2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/team3.png
Normal file
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/team3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/w3newbie.png
Normal file
BIN
bootstrap_4_site_files/Bootstrap 4 Site Files/img/w3newbie.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
340
bootstrap_4_site_files/Bootstrap 4 Site Files/index.html
Executable file
340
bootstrap_4_site_files/Bootstrap 4 Site Files/index.html
Executable 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
bootstrap_4_site_files/Bootstrap 4 Site Files/style.css
Executable file
296
bootstrap_4_site_files/Bootstrap 4 Site Files/style.css
Executable 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
bootstrap_4_site_files/Build-4-Websites.html
Normal file
71
bootstrap_4_site_files/Build-4-Websites.html
Normal 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
Normal file
BIN
tutorial-29.zip
Normal file
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user