API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 26th, 2017
61
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.28 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="de">
  4.   <head>
  5.     <link rel="icon" href="img/favicon.png" sizes="16x16" type="image/vnd.microsoft.icon">
  6.     <meta charset="utf-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <meta name="description" content="Praktischer Teil der Zwischenprüfung">
  10.     <meta name="author" content="Moritz Küther">
  11.  
  12.     <title>Kaffeerösterei Clemens Tourk</title>
  13.  
  14. <!-- Bootstrap -->
  15.     <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
  16.  
  17.     <link href="css/blog2.css" rel="stylesheet" type="text/css">
  18.  
  19.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  20.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  21.     <!--[if lt IE 9]>
  22.      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  23.      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  24.    <![endif]-->
  25.  
  26.   </head>
  27.  
  28.   <body>
  29.  
  30.   <div class="blog-masthead">
  31.     <div class="container-nav">
  32.         <nav class="blog-nav">
  33.             <a class="blog-nav-item" href="javascript:return false;">Home</a>
  34.             <a class="blog-nav-item" href="javascript:return false;">Aktuelles</a>
  35.             <a class="blog-nav-item" href="javascript:return false;">Alles über Kaffee</a>
  36.             <a class="blog-nav-item" href="javascript:return false;">Café</a>
  37.             <img src="img/logo.png" width="105px" height="105px" style="margin-bottom: 15px;">
  38.             <a class="blog-nav-item" href="javascript:return false;">Online-Shop</a>
  39.             <a class="blog-nav-item" href="#seminare">Seminare</a>
  40.             <a class="blog-nav-item" href="javascript:return false;">Kontakt</a>
  41.             <a class="blog-nav-item" href="javascript:return false;">Impressum</a>
  42.         </nav>
  43.     </div> 
  44. </div>
  45.  
  46. <div id="buehne">
  47. </div>
  48.  
  49. <div class="content">
  50.     <h1>Von Aroma bis Zubereitung: <br>Unsere Kaffee-Seminare für Sie!</h1>
  51.     <p>Wussten Sie schon, dass die belebende Wirkung des Kaffees einst ein äthiopischer Ziegenhirte entdeckt haben soll, <br>als seine Herde auch nachts putzmunter blieb, nachdem sie Beeren einer ungewöhnlichen Pflanze gefressen hatte? <br>Diese und weitere spannende Details rund um den Kaffee-Genuss erfahren Sie bei uns:</p>
  52.  
  53. <!-- Anreißer -->
  54.  
  55. <section data-sr-id="2" style="; visibility: visible;  -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 1s cubic-bezier( 0.6, 0.2, 0.1, 1 ) 0s, opacity 1s cubic-bezier( 0.6, 0.2, 0.1, 1 ) 0s; transition: transform 1s cubic-bezier( 0.6, 0.2, 0.1, 1 ) 0s, opacity 1s cubic-bezier( 0.6, 0.2, 0.1, 1 ) 0s; ">
  56.                 <div style="padding-left: 0px; padding-right: 0px;" class="container">
  57.                     <div class="row">
  58.                         <div class="col-md-4 col-sm-6">
  59.                             <div class="pricing pricing-3 text-center">
  60.                                 <img alt="Pricing" src="img/seminar-roestung.jpg">
  61.                                 <div class="pricing__body">
  62.                                     <h4>Das Ein und Alles:</h4>
  63.                                     <div class="pricing__price">
  64.                                         <span style="color: #c56b6b;" class="h1">Röstung</span>
  65.                                     </div>
  66.                                     <p style="font-size: 20px;">
  67.                                         Immer montags*
  68.                                     </p>
  69.                                     <a class="detail-button" href="javascript:/" onClick="div_change(1)">
  70.                                         <div style="background-color: #c56b6b;" class="pricing__button">
  71.                                             <img src="img/detail-button.png">
  72.                                         </div>
  73.                                     </a>
  74.                                 </div>
  75.                             </div>
  76.                         </div>
  77.                        
  78.                         <div class="col-md-4 col-sm-6">
  79.                             <div class="pricing pricing-3 text-center">
  80.                                 <img alt="Pricing" src="img/seminar-bruehkaffee.jpg">
  81.                                 <div class="pricing__body">
  82.                                     <h4>Da steckt mehr drin:</h4>
  83.                                     <div class="pricing__price">
  84.                                         <span style="color: #dda84c;" class="h1">Brühkaffee</span>
  85.                                     </div>
  86.                                     <p style="font-size: 20px;">
  87.                                         Immer mittwochs*
  88.                                     </p>
  89.                                     <a class="detail-button" href="javascript:/" onClick="div_change(2)">
  90.                                         <div style="background-color: #dda84c;" class="pricing__button">
  91.                                             <img src="img/detail-button.png">
  92.                                         </div>
  93.                                     </a>
  94.                                 </div>
  95.                             </div>
  96.                         </div>
  97.  
  98.                         <div class="col-md-4 col-sm-6">
  99.                             <div class="pricing pricing-3 text-center">
  100.                                 <img alt="Pricing" src="img/seminar-schaum.jpg">
  101.                                 <div class="pricing__body">
  102.                                     <h4>Das lässt sich sehen:</h4>
  103.                                     <div class="pricing__price">
  104.                                         <span style="color: #84ddb8;" class="h1">Aufgeschäumt</span>
  105.                                     </div>
  106.                                     <p style="font-size: 20px;">
  107.                                         Immer freitags*
  108.                                     </p>
  109.                                     <a class="detail-button" href="javascript:/" onClick="div_change(3)">
  110.                                         <div style="background-color: #84ddb8;" class="pricing__button">
  111.                                             <img src="img/detail-button.png">
  112.                                         </div>
  113.                                     </a>
  114.                                 </div>
  115.                             </div>
  116.                         </div>                     
  117.  
  118.                     </div>
  119.                 </div>
  120.             </section>
  121.  
  122. <!-- Anreißer ENDE -->
  123.  
  124. <!-- Details Ein-/ Ausblenden -->
  125.  
  126.  <script language="JavaScript">
  127.  function div_change(strID){
  128.         document.getElementById(strID).style.display = (document.getElementById(strID).style.display == 'none' ) ? 'block' : 'none';
  129.         document.getElementById(strID + "_shown").style.display = (document.getElementById(strID + "_shown").style.display == 'none' ) ? 'block' : 'none';
  130.         document.getElementById(strID + "_hidden").style.display = (document.getElementById(strID + "_hidden").style.display == 'none' ) ? 'block' : 'none';
  131.  
  132.  } </script>
  133.  
  134. <!-- Detailseiten -->
  135.  
  136. <div id="1" class="detail-bruehkaffee">
  137.     <div class="detail-brueh">
  138.         <img src="img/roestung-detail.jpg" style="height: 516px; width: 350px; margin-right: 45px; margin-top: 15px">
  139.     </div>
  140.     <h1>Das Ein und Alles</h1>
  141.     <img src="img/roestung-daten.png" style="padding-top: 40px; padding-bottom: 30px;">
  142.     <p>Sie erleben sämtliche Schritte von der grünen bis zur gerösteten Bohne und erfahren etwas über die Vorzüge der einzelnen Kaffeesorten. Wir laden Sie ein zur Verkostung und schulen Ihre Sinne: So können Sie Ihren Trinkgenuss steigern und Familie und Freunde überraschen.</p>
  143.     <div class="container-button">
  144.         <a href="javascript:return false;" class="button red"><span>45€</span>jetzt teilnehmen<img src="img/detail-button.png"></a>
  145.     </div>
  146. </div>
  147.  
  148. <div id="2" class="detail-bruehkaffee">
  149.     <div class="detail-brueh">
  150.         <img src="img/bruehkaffee-detail.jpg" style="height: 516px; width: 350px; margin-right: 45px;">
  151.     </div>
  152.     <h1>Da steckt mehr drin</h1>
  153.     <img src="img/brueh-daten.png" style="padding-top: 40px; padding-bottom: 30px;">
  154.     <p>Sie werden sich wundern, welche aromatische Vielfalt mit <br>dieser altbekannten Zubereitungsart möglich ist. Wir zeigen Ihnen verschiedene Brühmethoden und Sie kosten das Ergebnis. Sie probieren selbst Ihre Lieblingsmethode aus und perfektionieren sie.</p>
  155.     <div class="container-button">
  156.         <a href="javascript:return false;" class="button red"><span>45€</span>jetzt teilnehmen<img src="img/detail-button.png"></a>
  157.     </div>
  158. </div>
  159.  
  160. <div id="3" class="detail-bruehkaffee">
  161.     <div class="detail-brueh">
  162.         <img src="img/schaum-detail.jpg" style="height: 516px; width: 350px; margin-right: 45px;">
  163.     </div>
  164.     <h1>Das lässt sich sehen</h1>
  165.     <img src="img/schaum-daten.png" style="padding-top: 40px; padding-bottom: 30px;">
  166.     <p>Sie erfahren, wie der Cappuccino zu seiner perfekten Haube kommt. Sie üben das Schäumen und lernen, wie sich der Milchschaum zu verschiedenen Motiven formen lässt. Wir verraten Ihnen weitere Tricks, wie auch zuhause eine Tasse Kaffee zum Augenschmaus wird.</p>
  167.     <div class="container-button">
  168.         <a href="javascript:return false;" class="button red"><span>45€</span>jetzt teilnehmen<img src="img/detail-button.png"></a>
  169.     </div>
  170. </div>
  171.  
  172. <!-- Detailseiten ENDE -->
  173.  
  174. <p style="padding-top: 50px; font-size: 12px;">* Bitte beachten Sie: An Feiertagen finden keine Kaffee-Seminare statt. </p>
  175.  
  176. </div>
  177.  
  178. <!-- Footer -->
  179.  
  180.     <img class="footer-image" src="img/footer.png">
  181.  
  182.         <footer class="footer-basic-centered">
  183.  
  184.             <p class="footer-company-motto" style="font-size: 18px; font-style: italic;">„Kaffee dehydriert den Körper nicht. Ich wäre sonst schon Staub.“
  185. Franz Kafka</p>
  186.  
  187.             <p class="footer-links" style="padding-top: 0px; font-size: 25px;">
  188.                 <a class="blog-foo-item" href="javascript:return false;">Home</a>
  189.                 <a class="blog-foo-item" href="javascript:return false;">Aktuelles</a>
  190.                 <a class="blog-foo-item" href="javascript:return false;">Alles über Kaffee</a>
  191.                 <a class="blog-foo-item" href="javascript:return false;">Café</a>
  192.                 <a class="blog-foo-item" href="javascript:return false;">Online-Shop</a>
  193.                 <a class="blog-foo-item" href="#seminare">Seminare</a>
  194.                 <a class="blog-foo-item" href="javascript:return false;">Kontakt</a>
  195.                 <a class="blog-foo-item" href="javascript:return false;">Impressum</a>
  196.             </p>
  197.  
  198.             <p class="footer-company-name" style="padding-top: 0px;">Moritz Küther &copy; 2017</p>
  199.  
  200.         </footer>
  201.  
  202. <!-- Footer ENDE -->       
  203.  
  204.             <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  205.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  206.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  207.     <script src="js/bootstrap.min.js"></script>
  208.  
  209.   </body>
  210.  
  211. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!