<script src="/js_webseite/jquery.js"></script> <script src="/js_webseite/bootstrap.min.js"></script> <script src="/js_webseite/jquery.touchSwipe.min.js"></script> <link rel="stylesheet" href="/css_webseite/bootstrap.css"> <style> .nav-tabs { height:40px; border-bottom: 2px solid #DDD; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { border-width: 0; } .nav-tabs>li>a { border: none; color: #666; } .nav-tabs>li.active>a, .nav-tabs>li>a:hover { border: none; color: #4285F4 !important; background: transparent; } .nav-tabs>li>a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); } .nav-tabs>li.active>a::after, .nav-tabs>li:hover>a::after { transform: scale(1); } .tab-nav>li>a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; } .tab-pane { overflow:auto; height:300px; padding: 15px 0; } .tab-content { padding: 20px } .card { background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; } body { background: #EDECEC; padding: 50px; } #bild1{ float:left; margin:0 10px 0px 0; } #bild2{ float:right; } #fest1{ display:flex; } #bild3{ } </style> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="card"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"><img id="bild1" src="/image/kermit_.jpg">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recentl with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <div role="tabpanel" class="tab-pane" id="profile"><img id="bild2" src="/image/kermit_.jpg">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's sLorem Ipsum is simply dummy text of the printing and typesettinLorem Ipsum is simply dummy text of the printLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.ing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.g industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.tandard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div role="tabpanel" class="tab-pane" id="messages"><div id="fest1"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's sLorem Ipsum is simply dummy text of the printing and typesettinLorem Ipsum is simply dummy text of the printLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.ing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.g industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.tandard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><img id="bild3" src="/image/kermit_.jpg"></div></div> <div role="tabpanel" class="tab-pane" id="settings">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passage..</div> </div> </div> </div> </div> </div> <script> $(".card").swipe( { swipeLeft:function(event, direction, distance, duration, fingerCount) { $(".nav-tabs li.active").next('li').find('a').tab('show'); }, swipeRight:function(event, direction, distance, duration, fingerCount) { $(".nav-tabs li.active").prev('li').find('a').tab('show'); }, }); </script>