Changed headers in About. Changed Contact.

Changed headers in About page to a serif italic font.

Removed the contact form in the header part. Created a design which
looks more like an actual businesscard.

Still to be done:
* Fix the design on mobile.
* Add vCard as download link
This commit is contained in:
2018-07-16 01:12:22 +02:00
committed by Dennis Potter
parent e00e52029f
commit d387cc8d59
5 changed files with 164 additions and 221 deletions

View File

@@ -491,81 +491,65 @@
================================================== -->
<section id="contact">
<div class="row section-head">
<div class="two columns header-col">
<h1></h1>
<div class="twelve columns header-col">
<h1>Get in Touch</h1>
</div>
<div class="ten columns">
<p class="contacttext">Do you have any further questions? Don't hesitate to reach out to me! You can either use the contact form or the contact details below.
</p>
</div>
<!-- Contact details -->
<div class="contact-detail-wrapper">
<div class="three columns contact-column-wrapper">
<i class="fa fa-phone-square" id="contact-fa"></i>
<p id="contact-phone">+49 176 386 635 87</p>
</div>
<!--<div class="five columns">
</div>-->
<div class="four columns contact-column-wrapper">
<i class="fa fa-envelope" id="contact-fa"></i>
<p id="contact-email">dennis@dennispotter.eu</p>
</div>
<div class="five columns contact-column-wrapper">
<i class="fa fa-key" id="contact-fa"></i>
<p id="contact-pgp">3164 394F FBBF 6F3B AE6A<br />D43B 186A 8AD4 4094 2BAF</p>
</div>
</div>
</div>
<div class="row">
<!-- form -->
<form action="" method="post" id="contactForm" name="contactForm">
<div class="six columns">
<div>
<label for="contactName">Name <span class="required">*</span></label>
<input type="text" value="" size="35" id="contactName" name="contactName">
</div>
<div>
<label for="contactEmail">Email <span class="required">*</span></label>
<input type="text" value="" size="35" id="contactEmail" name="contactEmail">
</div>
<div>
<label for="contactSubject">Subject</label>
<input type="text" value="" size="35" id="contactSubject" name="contactSubject">
</div>
</div>
<div class="six columns">
<label for="contactMessage">Message <span class="required">*</span></label>
<textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea>
</div>
<div class="twelve columns">
<button class="submit">Submit</button>
<span id="image-loader">
<img alt="" src="images/loader.gif">
</span>
</div>
</form> <!-- Form End -->
<!-- contact-warning -->
<div class="twelve columns">
<div id="message-warning">Error boy</div>
<!-- contact-success -->
<div id="message-success">
<i class="fa fa-check"></i>Your message was sent, thank you!<br>
</div>
<p class="contacttext">Do you have any further questions? Please don't hesitate to reach out to me!
</p>
</div>
</div>
<!-- Contact details -->
<div class="row" id="row-businesscard">
<div class="one columns"></div>
<div class="five columns contact-left businesscard">
<img class="profile-pic" src="images/profilepic.jpg" alt="" />
<p class="name">Dennis Potter</p>
<div id="contact-social-list">
<li><a href="https://www.facebook.com/dennispotter25" target="_blank"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://www.linkedin.com/in/dennispotter25" target="_blank"><i class="fab fa-linkedin"></i></a></li>
<li><a href="https://www.instagram.com/dennispotter25" target="_blank"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://git.dennispotter.eu/Dennis" target="_blank"><i class="fab fa-git-square"></i></a></li>
<li><a href="skype:dennispotter25?call"><i class="fab fa-skype"></i></a></li>
</div>
</div>
<div class="five columns contact-right businesscard">
<ul>
<li>
<i class="fa fa-phone" id="contact-fa"></i>
<p id="contact-phone">+49 176 386 635 87</p>
</li>
<li>
<i id="contact-riot-logo"></i>
<p id="contact-riot">@dennis:dennispotter.eu</p>
</li>
<li>
<i class="fa fa-envelope" id="contact-fa"></i>
<p id="contact-email">dennis@dennispotter.eu</p>
</li>
<li>
<i class="fa fa-key" id="contact-fa"></i>
<p id="contact-pgp">3164 394F FBBF 6F3B AE6A<br />D43B 186A 8AD4 4094 2BAF</p>
</li>
</ul>
</div>
<div class="one columns"></div>
</div>
<div class="row">
<div class="twelve columns" style="text-align: center; margin-top: 40px;">
<i>Download my information as vCard</i>
</div>
</div>
</section> <!-- Contact Section End-->
@@ -573,24 +557,8 @@
================================================== -->
<footer>
<div class="row">
<div class="twelve columns">
<ul class="social-links">
<li><a href="https://www.facebook.com/dennispotter25" target="_blank"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://www.linkedin.com/in/dennispotter25" target="_blank"><i class="fab fa-linkedin"></i></a></li>
<li><a href="https://www.instagram.com/dennispotter25" target="_blank"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://git.dennispotter.eu/Dennis" target="_blank"><i class="fab fa-git-square"></i></a></li>
<li><a href="skype:dennispotter25?call"><i class="fab fa-skype"></i></a></li>
<li><a class="smoothscroll" href="#contact"><i class="fa fa-envelope"></i></a></li>
<li><a class="smoothscroll" href="#contact"><i class="fa fa-phone-square"></i></a></li>
</ul>
</div>
<div class="row" style="height: 200px;">
<div id="go-top"><a class="smoothscroll" title="Back to Top" href="#home"><i class="icon-up-open"></i></a></div>
</div>
</footer> <!-- Footer End-->