Contact all your info in one place


Create your vcard and add a contact form in contact.php file. If you don't know how to change icons visit styles.

...
<div class="description">
  <h3>keep in touch</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id sem ornare, eleifend dui id, iaculis lorem. In vehicula nec odio non posuere. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut non faucibus augue. Phasellus sed posuere tellus, vitae ultrices elit. In eu iaculis tellus, in suscipit justo. </p>
</div>

<div class="vcard">
  <h3>address</h3>
  <p class="adr">
	<span class="company-name">MDST sp. z o.o.</span>
	<span class="street-address">Tęczowa 64</span>
	<span class="postal-code">53-511 Wroclaw</span>
  </p>
  <p class="main-contact">
	<span class="email">mail: <a class="email" href="#" title="">hello@mdst.com</a></span>
	<span class="tel">mobile: <span class="phone-number">(+48) 888 999 888</span></span>
  </p>
  <a href="#" class="marker"><i class="icon-pointer"></i></a>
</div>

<div class="social-media">
  <h3>find us on</h3>
  <ul class="social-icon">
    <li>
	  <a href="#"><i class="fa fa-facebook"></i></a>
	</li>
	<li>
	  <a href="#"><i class="fa fa-twitter"></i></a>
	</li>
	<li>
	  <a href="#"><i class="fa fa-pinterest"></i></a>
	</li>
  </ul>
</div>
...

Background overlay

If you want to add background images, use a overlay-image class. You can change styles the class in custom.less. We didn't insert a map in our theme but if you need to use it check the site.

//Background image
<div class="full" style="width: 100%; height: 100%; position: inherit">
  <div class="overlay-image"></div>
</div>

Contact form

In our package you'll find working contact form (contact-send.php and contact.php files). Change or insert your inputs and labels in the contact.php. How you can see we also created alert error and success when the form was sent. If you want to change contact styles check contact.less and custom.less

<section class="form">
	<h3>contact form</h3>
	<form name="contact-form" id="contact-form" action="contact_send.php" method="POST">
		<div class="input-wrapper">
			<label for="form-name">Name</label>
			<input class="contact-form form-name-error" type="text" placeholder="Fill up name" name="contact[form-name]" id="form-name">
		</div>
		<div class="input-wrapper">
			<label for="form-email">Mail</label>
			<input class="contact-form form-email-error" type="text" placeholder="Fill up email" name="contact[form-email]" id="form-email">
		</div>
...

Styles in contact.php

custom.less

...
//form
//-----------------------------------------

.placeholder(@color) {
    &::-webkit-input-placeholder {
        color: @color;
    }
    &:-moz-placeholder {
        color: @color;
    }
    &:-ms-input-placeholder {
    	color: @color;
    }
}

.message-error { border: 1px solid #ff2d55 !important; .placeholder(#ff2d55) !important}
...