alpinresorts neu

by mtenschert

HTML

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />


<div class="header">

  <img id="logo" style="float: left; margin: 10px 0px 10px 20px; width: 250px;" src="https://www.alpinresorts.com/assets/images/footer-logo.png">

  <!--
  
  <ul class="main-navigation">
    <li>Skiverleih</li>
    <li>Skischule</li>
    <li>Hilfe & Kundenservice</li>
    <li>Über uns</li>
  </ul>
  <ul class="meta-navigation">
    <li>Hotline</li>
    <li>EUR</li>
    <li>Deutsch</li>
  </ul>
  
  -->

</div>

<div class="main">
  <div class="main-left">

    <div class="search-form-container"></div>

    <div class="left-info phone-number">
      <span class="phone-headline">Kundenservice <i class="fa fa-phone"></i></span>
      <span class="phone-number">+43 720 884 060</span>
      <small class="phone-opening">MON - SON 9:00 - 17:00 CEST</small>
    </div>
    
    <div class="left-info phone-number">
      <span class="phone-headline">Zahlungsanbieter <i class="fa fa-shopping-cart"></i></span>
      <small class="phone-opening">gültig für Kunden aus Österreich</small>
      <div _ngcontent-c20="" class="payment-picture mastercard"></div>
      <div _ngcontent-c20="" class="payment-picture visa"></div>
      <div _ngcontent-c20="" class="payment-picture paypal"></div>
    </div>

    <div class="left-info phone-number">
      <span style="margin-bottom:10px;" class="phone-headline">Bewertungen <i class="fa fa-star"></i></span>
      <img border="0" src="https://connect.ekomi.de/widget/5B0120F907A6499-8.gif" alt="eKomi - The Feedback Company: Die online Reservierung für Skier war ohne Schwierigkeiten zu vollziehen. Die Seite war verständlich und übersichtlich. Die Bestellung liß sich in wenigen Minuten vollziehen." title="eKomi - The Feedback Company: Die online Reservierung für Skier war ohne Schwierigkeiten zu vollziehen. Die Seite war...

CSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* standards */

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: #484848;
  background: white;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Open Sans', sans-serif;
}

i {
  width: 18px;
  text-align: center;
}

h1 {
  font-size: 160%;
  line-height: 140%;
  font-weight: bold;
}

h2 {
  font-size: 120%;
  line-height: 140%;
}

h3 {}

strong {
  font-weight: bold;
}

div.breadcrump {
  font-size: 90%;
}

div.breadcrump a {
  color: #428bca;
  text-decoration: underline;
  cursor: pointer;
  font-style: normal;
}

/* headlines */

.headline1 {
  margin-top: 10px;
  font-size: 24px;
  line-height: 34px;
  margin-bottom: 5px;
  font-weight: normal;
}

.headline2 {
  font-size: 16px;
  line-height: 22px;
}

.headline2 strong {
  font-weight: bold;
}

.headline2 .stars {
  color: orange;
}

/* boxes */

div.header {
  height: 142px;
  background-color: #b62125;
  margin-bottom: 20px;
}

div.main {
  width: 100%;
}

div.main-top {
 ...