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:
138
index.html
138
index.html
@@ -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-->
|
||||
|
Reference in New Issue
Block a user