contact form

by marusti

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="flexcontainer">
  <div class="map">
    <iframe width="100%" height="350" src="http://www.openstreetmap.org/export/embed.html?bbox=-6.076469421386718%2C53.11674791515086%2C-6.047286987304687%2C53.138738944029086&amp;layer=hot&amp;marker=53.12774483622031%2C-6.061878204345703"></iframe>
    <br/><small><a href="http://www.openstreetmap.org/?mlat=53.1277&amp;mlon=-6.0619#map=15/53.1277/-6.0619&amp;layers=H">Enlarge Map</a></small>
  </div>
  <div class="contact-details">
    <h2>Contact Details</h2>
    <address>
    <p>Marusti WebDesign<br />Seabourne View<br />Greystones<br />Co. Wicklow<br />
      Ireland</p>
    </address>
    <p><i class="fa fa-envelope"></i> info<i class="fa fa-at"></i>marusti.com</p>
    <p>Company Number: 529352</p>
  </div>
  <div class="contact-form">
    <h3>
Kontaktformular
</h3>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

.flexcontainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

@media only screen and (min-width: 768px) {
  .flexcontainer {
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: flex-start;
    align-content: flex-start;
  }
  .map {
    /* This will be twice as big as the small item. */
    -webkit-flex: 2 0 0;
    flex: 2 0 0;
    margin-right: 1em
  }
  .contact-details {
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
  }
  .contact-form {
    flex: 1 100%
  }
}


}