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:
parent
635139f7e8
commit
c800dbeb48
|
|
@ -180,8 +180,9 @@ p.lead {
|
|||
}
|
||||
|
||||
p.contacttext {
|
||||
font: 19px/36px 'opensans-light', sans-serif;
|
||||
color: #ebeeee;
|
||||
font: 19px/19px 'opensans-light', sans-serif;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 889px) {
|
||||
|
|
|
|||
182
css/layout.css
182
css/layout.css
|
|
@ -243,7 +243,7 @@ ul#nav li.current a { color: #11ABB0; }
|
|||
#about a:hover, #about a:focus { color: #11ABB0; }
|
||||
|
||||
#about h2 {
|
||||
font: 22px/30px 'opensans-bold', sans-serif;
|
||||
font: 32px/30px 'librebaskerville-italic', serif;
|
||||
color: #fff;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
|
@ -253,7 +253,7 @@ ul#nav li.current a { color: #11ABB0; }
|
|||
}
|
||||
#about .profile-pic {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
width: 160px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
#about .contact-details { width: 41.66667%; }
|
||||
|
|
@ -877,29 +877,18 @@ call-to-action .button {
|
|||
padding-bottom: 70px;
|
||||
color: #636363;
|
||||
}
|
||||
#contact .section-head { margin-bottom: 42px; }
|
||||
#contact .section-head { margin-bottom: 20px; }
|
||||
|
||||
#contact a, #contact a:visited { color: #11ABB0; }
|
||||
#contact a:hover, #contact a:focus { color: #fff; }
|
||||
|
||||
#contact h1 {
|
||||
font: 18px/24px 'opensans-bold', sans-serif;
|
||||
text-transform: uppercase;
|
||||
font: 39px/50px 'librebaskerville-italic', serif;
|
||||
letter-spacing: 3px;
|
||||
color: #EBEEEE;
|
||||
margin-bottom: 6px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
#contact h1 span { display: none; }
|
||||
#contact h1:before {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
content: "\f2b9";
|
||||
padding-right: 10px;
|
||||
font-size: 90px;
|
||||
line-height: 90px;
|
||||
text-align: left;
|
||||
float: left;
|
||||
color: #ebeeee;
|
||||
}
|
||||
|
||||
#contact h4 {
|
||||
font: 16px/24px 'opensans-bold', sans-serif;
|
||||
|
|
@ -912,108 +901,115 @@ call-to-action .button {
|
|||
}
|
||||
#contact .header-col { padding-top: 0px; }
|
||||
|
||||
|
||||
/* contact form */
|
||||
#contact form { margin-bottom: 30px; }
|
||||
#contact label {
|
||||
font: 15px/24px 'opensans-bold', sans-serif;
|
||||
margin: 12px 0;
|
||||
color: #EBEEEE;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 26%;
|
||||
}
|
||||
#contact input,
|
||||
#contact textarea,
|
||||
#contact select {
|
||||
padding: 18px 20px;
|
||||
color: #eee;
|
||||
background: #373233;
|
||||
margin-bottom: 42px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
width: 95%;
|
||||
}
|
||||
#contact input:focus,
|
||||
#contact textarea:focus,
|
||||
#contact select:focus {
|
||||
color: #fff;
|
||||
background-color: #11ABB0;
|
||||
}
|
||||
#contact button.submit {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
color:#fff;
|
||||
background: #0D0D0D;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
height: auto;
|
||||
#contact li {
|
||||
position: relative;
|
||||
font:22px/1.1em 'hackregular', monospace;
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
margin-left: 0%;
|
||||
}
|
||||
#contact button.submit:hover {
|
||||
color: #0D0D0D;
|
||||
background: #fff;
|
||||
}
|
||||
#contact span.required {
|
||||
color: #11ABB0;
|
||||
font-size: 13px;
|
||||
}
|
||||
#message-warning, #message-success {
|
||||
display: none;
|
||||
background: #0F0F0F;
|
||||
padding: 24px 24px;
|
||||
margin-bottom: 36px;
|
||||
width: 100%;
|
||||
}
|
||||
#message-warning { color: #D72828; }
|
||||
#message-success { color: #11ABB0; }
|
||||
|
||||
#message-warning i,
|
||||
#message-success i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
#image-loader {
|
||||
display: none;
|
||||
|
||||
#contact ul {
|
||||
margin-top: 70px;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
}
|
||||
|
||||
#row-businesscard {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#contact .profile-pic {
|
||||
display: block;
|
||||
margin: 50px auto 0 auto;
|
||||
position: relative;
|
||||
left: 18px;
|
||||
top: 17px;
|
||||
text-align: center;
|
||||
width: 180px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.contact-detail-wrapper {
|
||||
padding-top: 10px;
|
||||
#contact .name {
|
||||
font: 28px/0px 'librebaskerville-italic', serif;
|
||||
text-align: center;
|
||||
color: #0F0F0F;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
|
||||
#contact .contact-right {
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
background-color: #0F0F0F;
|
||||
}
|
||||
|
||||
#contact .contact-left {
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
background-color: #EBEEEE;
|
||||
}
|
||||
|
||||
#contact-social-list > li {
|
||||
margin: 0px 10px;
|
||||
}
|
||||
#contact-social-list {
|
||||
text-align: center;
|
||||
color: #0F0F0F;
|
||||
}
|
||||
#contact-social-list a {
|
||||
color: #0F0F0F;
|
||||
}
|
||||
#contact-social-list a:visited {
|
||||
color: #0F0F0F;
|
||||
}
|
||||
#contact-social-list a:hover {
|
||||
color: #11ABB0;
|
||||
}
|
||||
|
||||
#contact .businesscard {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.contact-column-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
#contact-fa {
|
||||
font-size: 25px;
|
||||
font-size: 28px;
|
||||
vertical-align: top;
|
||||
float: left;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
#contact-phone {
|
||||
font-size: 20px;
|
||||
margin-top: 3px;
|
||||
float: left;
|
||||
margin-left: 7px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
#contact-email {
|
||||
font-size: 20px;
|
||||
margin-top: 3px;
|
||||
float: left;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
#contact-riot {
|
||||
margin-top: 3px;
|
||||
float: left;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
#contact-riot-logo {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #0F0F0F url(../images/riot.svg);
|
||||
vertical-align: top;
|
||||
margin-left: -5px;
|
||||
float: left;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
#contact-pgp {
|
||||
float: left;
|
||||
margin-left: 7px;
|
||||
font:20px/1.1em 'hackregular', monospace;
|
||||
margin-top: -4px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
/* Fixes for contact details really small screens */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 1440 1440" enable-background="new 0 0 1440 1440" xml:space="preserve">
|
||||
<path fill="#636363" d="M761.5,142.1H442c-0.7,0-1.3-0.1-2-0.1c-88.8,0-160.8,72-160.8,160.8v803.9c0,88.8,72,160.8,160.8,160.8
|
||||
s160.8-72,160.8-160.8V945.8h160.7c221.6,0,401.8-180.3,401.8-401.8S983.1,142.1,761.5,142.1z"/>
|
||||
<g>
|
||||
<circle fill="#0F0F0F" cx="437.5" cy="298.8" r="160.8"/>
|
||||
<path fill="#636363" d="M1134.3,1014.4c50.9,72.7,33.3,173-39.5,223.9c-72.7,50.9-173,33.3-223.9-39.5l-240.8-344
|
||||
c-50.9-72.7-33.3-173,39.5-223.9c72.7-50.9,173-33.3,223.9,39.5L1134.3,1014.4z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 942 B |
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-->
|
||||
|
|
|
|||
46
js/init.js
46
js/init.js
|
|
@ -156,48 +156,12 @@
|
|||
});
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* contact form
|
||||
/* contact
|
||||
------------------------------------------------------*/
|
||||
|
||||
$('form#contactForm button.submit').click(function() {
|
||||
|
||||
$('#image-loader').fadeIn();
|
||||
|
||||
var contactName = $('#contactForm #contactName').val();
|
||||
var contactEmail = $('#contactForm #contactEmail').val();
|
||||
var contactSubject = $('#contactForm #contactSubject').val();
|
||||
var contactMessage = $('#contactForm #contactMessage').val();
|
||||
|
||||
var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail +
|
||||
'&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage;
|
||||
|
||||
$.ajax({
|
||||
|
||||
type: "POST",
|
||||
url: "inc/sendEmail.php",
|
||||
data: data,
|
||||
success: function(msg) {
|
||||
|
||||
// Message was sent
|
||||
if (msg == 'OK') {
|
||||
$('#image-loader').fadeOut();
|
||||
$('#message-warning').hide();
|
||||
$('#contactForm').fadeOut();
|
||||
$('#message-success').fadeIn();
|
||||
}
|
||||
// There was an error
|
||||
else {
|
||||
$('#image-loader').fadeOut();
|
||||
$('#message-warning').html(msg);
|
||||
$('#message-warning').fadeIn();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
// Adapt Riot logo to format of fontawesome icons
|
||||
var faHeight = document.getElementById('contact-fa').clientHeight * 1.3;
|
||||
document.getElementById('contact-riot-logo').setAttribute("style","height:"+faHeight+"px; width:"+faHeight+"px");
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue