This commit is contained in:
2019-05-13 14:13:48 +02:00
2 changed files with 40 additions and 10 deletions

View File

@@ -63,20 +63,32 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm-8">
One of three columns <div class="card">
<div class="card-body">
<p><img src="assets1/1.png"></p>
</div>
</div>
<div class="card">
<div class="card-body">
<p><img src="assets1/2.png"></p>
</div>
</div>
</div> </div>
<div class="col-sm"> <div class="col-sm-4">
One of three columns <ul class="list-group">
</div> <li class="list-group-item-dark">Cras justo odio</li>
<div class="col-sm"> <li class="list-group-item-dark">Dapibus ac facilisis in</li>
One of three columns <li class="list-group-item-dark">Morbi leo risus</li>
<li class="list-group-item-dark">Porta ac consectetur ac</li>
<li class="list-group-item-dark">Vestibulum at eros</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
</main><!-- /.container --> </main><!-- /.container -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="https://getbootstrap.com/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script></body> <script>window.jQuery || document.write('<script src="https://getbootstrap.com/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="https://getbootstrap.com/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script></body>
</html> </html>

View File

@@ -52,6 +52,14 @@
z-index: 1; //weiter vorne/hinten z-index: 1; //weiter vorne/hinten
} }
.lefttoright-delay {
animation: fahren_rechts 10s linear infinite;
animation-delay: 4s;
bottom: -5%;
left: -40%;
z-index: 1; //weiter vorne/hinten
}
.righttoleft { .righttoleft {
animation: fahren_links 10s linear infinite; animation: fahren_links 10s linear infinite;
bottom: 8%; bottom: 8%;
@@ -60,13 +68,23 @@
z-index: 0; //weiter vorne/hinten z-index: 0; //weiter vorne/hinten
animation-direction: reverse; animation-direction: reverse;
} }
.righttoleft-delay {
animation: fahren_links 10s linear infinite;
animation-delay: 4s;
bottom: 8%;
left: -40%;
transform: scaleX(-1);
z-index: 0; //weiter vorne/hinten
animation-direction: reverse;
}
</style> </style>
</head> </head>
<body> <body>
<img class="lefttoright" src="/~zxmpy88/uebung2/assets3/car1.svg"> <img class="lefttoright" src="/~zxmpy88/uebung2/assets3/car1.svg">
<img class="delay lefttoright" src="/~zxmpy88/uebung2/assets3/car2.svg"> <img class="lefttoright-delay" src="/~zxmpy88/uebung2/assets3/car2.svg">
<img class="righttoleft" src="/~zxmpy88/uebung2/assets3/car3.svg"> <img class="righttoleft" src="/~zxmpy88/uebung2/assets3/car3.svg">
<img class="delay righttoleft" src="/~zxmpy88/uebung2/assets3/car4.svg"> <img class="righttoleft-delay" src="/~zxmpy88/uebung2/assets3/car4.svg">
</body> </body>
</html> </html>