wendtth65566
/
MDT_5_2_projekt

<!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>&copy; thilo-wendt.de</h5>
                    </div>
                </div>
            </div>
        </footer>


    </body>
</html>


<!--- Check out my courses! -->