Group discount page

by mtenschert

HTML

<link rel="stylesheet" href="https://beta.alpinresorts.com/assets/css/main.css"><div class="container container__content main ">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">



<div class="clearfix terms-additionals col-lg-8">

<h3>Gruppenbucher haben es besser</h3>
<p>Buchen Sie als Gruppe und profitieren Sie von unseren Gruppenrabatten!</p>

<details>

<summary>
  <h3>Gruppenbuchungen bei unseren Französischen Shops</h3>
</summary>

<p>Ihr Gruppenrabatt wird automatisch abgezogen! So einfach geht’s:</p>

<ol class="group">
  <li>Wunschort auswählen
    <small> (vom Gruppenrabatt ausgenommene Orte)</small>
  </li>
  <li>Mietperiode festlegen</li>
  <li>Anzahl der Personen angeben</li>
  <li>Gruppenrabatte vergleichen und Shop auswählen
     <br>
    <img class="group" src="https://beta.alpinresorts.com/images/promotion/group-promo.png"> 
  </li>
</ol>

<h4>Buchen Sie für eine Gruppe von mindestens 15 Personen?</h4>
<p>Als Premiumkunde genießen Sie besondere Vorteile und profitieren von zusätzlichen Rabatten! Kontaktieren Sie Ihren persönlichen Kundenbetreuer für ein individuelles Angebot!</p>

<div class="important-label center">
  <span class="fa fa-phone-square"></span>
  +43 720 884 060
  <span class="fa fa-envelope" style="margin-left:10px;"></span>
  [email protected]
</div>

<br>

<ul class="group" style="margin-top:10px !important; padding-left:0px !important;">
  <li>Haben Sie noch generelle Fragen?</li>
  <li>Ihnen wird kein Gruppenrabatt abgezogen?</li>
  <li>Sie möchten ein persönliches Gespräch?</li>
</ul>

<h4>Wir stehen Ihnen gerne mit Rat und Tat zur Seite!</h4>

<small>Ausgenommene Orte</small>

<br>
<br>

</details>



<details>

<summary>
  <h3>Gruppenbuchungen Allgemein <small>(ausgenommen Französische Shops)</small></h3>
</summary>

<p>Ihr Gruppenrabatt wird automatisch abgezogen! So einfach...

CSS

img.group {
  margin-bottom:10px;
  margin-top:10px;
  width:90%;
  max-width:441px;
  border-radius:5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

ol.group, ul.group {
  padding:0px 0px 0px 20px !important;
  margin:0px 0px 20px 0px !important;
  font-size:1em;
}

ol.group li  {
  margin-bottom:0px !important;
}

summary:focus {
	outline: none;
}

summary:hover {
	cursor: pointer;
}

summary {
  font-size: 20px;
  margin-bottom: 5px;
}

summary h3  {
	display: inline;
  font-size:90%;
}

summary h3 small  {
	color:inherit;
}


details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; margin-left: -10px}
  100%  {opacity: 1; margin-left: 0px}
}