Facebook
From mata, 4 Years ago, written in HTML5.
Embed
Download Paste or View Raw
Hits: 139
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
  6.     <meta http-equiv="expires" content="0">
  7.     <meta http-equiv="pragma" content="no-cache">
  8.     <meta charset="utf-8">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1">
  10.     <link rel="stylesheet" href="style.css">
  11.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/css/bootstrap-slider.css">
  12.     <link rel="stylesheet" type="text/css" media="screen" href="http://92.42.139.214:5030/cert_all.css">
  13.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  14.     <title>Document</title>
  15. </head>
  16. <body class="cloudy">
  17.     <div class="container-fluid bottom">
  18.             <div class="row">
  19.                 <div class="col-lg-12">
  20.                     <div class="container-fluid p-4">
  21.                         <div class="row">
  22.                             <div class="col-sm-3">
  23.                                 <div class="form-group">
  24.                                     <input type="text" class="form-control mb-2">
  25.                                         <button class="btn btn-primary">Neu</button> <button class="btn btn-primary">Suchen</button>
  26.                                 </div>
  27.                             </div>
  28.                             <div class="col-sm-9">
  29.                                 <div class="card bg-white">
  30.                                     <div class="card-header">
  31.                                         EVENT-NAME
  32.                                     </div>
  33.                                     <div class="card-body">
  34.                                         <div class="container">
  35.                                             <div class="row">
  36.                                                 <div class="col-2">
  37.                                                     <img class="event-image" src="ausflug.jpg" alt="Ausfulg Image">
  38.                                                 </div>
  39.                                                 <div class="col-8">
  40.                                                     <table class="event-table">
  41.                                                         <tbody>
  42.                                                             <tr class="event-body">
  43.                                                                 <th class="event-info">NAME</th>
  44.                                                                 <td>Python & KI (gekault von RamsiStansi)</td>
  45.                                                            </tr>
  46.                                                            <tr class="event-body">
  47.                                                                <th class="event-info">BEGINN</th>
  48.                                                                <td>18.02.2020 13:15</td>
  49.                                                            </tr>
  50.                                                            <tr class="event-body">
  51.                                                                <th class="event-info">ENDE</th>
  52.                                                                <td>18.02.2020 15:30</td>
  53.                                                            </tr>
  54.                                                            <tr class="event-body">
  55.                                                                <th class="event-info">ORT</th>
  56.                                                                <td>techn. Museum</td>
  57.                                                            </tr>
  58.                                                            <tr class="event-body">
  59.                                                                <th class="event-info">ANSPRECHPERSON</th>
  60.                                                                <td>Prof. MMag Ing. Peter Suster</td>
  61.                                                            </tr>
  62.                                                            <tr class="event-body">
  63.                                                                <th class="event-info">TREFFUNKT</th>
  64.                                                                <td>Plößlgasse 13, 1040 Wien</td>
  65.                                                            </tr>
  66.                                                        </tbody>
  67.                                                    </table>
  68.                                                </div>
  69.                                                <div class="col-2">
  70.                                                    <div class="card bg-white">
  71.                                                        <div class="card-body">
  72.                                                            <div class="text-center">                                                            
  73.                                                                <button onclick="createBooking()" id="bookingBtn" class="btn btn-success">Buchen</button>
  74.                                                                <div class="mt-2">0/28</div>
  75.                                                            </div>
  76.                                                        </div>
  77.                                                    </div>
  78.                                                </div>
  79.                                            </div>
  80.                                        </div>
  81.                                        <div class="container-fluid mt-4">
  82.                                        <div class="row">
  83.                                            <div class="col-12">
  84.                                                <div class="form-group">
  85.                                                    <textarea class="form-control text-left" name="beschreibung" id="desc" cols="40" rows="15" disabled>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. 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. 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.</textarea>
  86.                                                </div>
  87.                                            </div>
  88.                                        </div>
  89.                                    </div>
  90.                                </div>
  91.                            </div>
  92.                        </div>
  93.                    </div>
  94.                </div>
  95.            </div>
  96.        </div>
  97.    </div>
  98.    <script>
  99.        function createBooking() {
  100.            document.getElementById("bookingBtn").className = "btn btn-secondary";
  101.             document.getElementById("bookingBtn").innerText = "Gebucht";
  102.         }
  103.     </script>
  104.     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  105.         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  106.         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  107. </body>
  108. </html>