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 {
|
p.contacttext {
|
||||||
font: 19px/36px 'opensans-light', sans-serif;
|
font: 19px/19px 'opensans-light', sans-serif;
|
||||||
color: #ebeeee;
|
text-align: center;
|
||||||
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 889px) {
|
@media only screen and (min-width: 889px) {
|
||||||
|
|||||||
188
css/layout.css
188
css/layout.css
@ -243,7 +243,7 @@ ul#nav li.current a { color: #11ABB0; }
|
|||||||
#about a:hover, #about a:focus { color: #11ABB0; }
|
#about a:hover, #about a:focus { color: #11ABB0; }
|
||||||
|
|
||||||
#about h2 {
|
#about h2 {
|
||||||
font: 22px/30px 'opensans-bold', sans-serif;
|
font: 32px/30px 'librebaskerville-italic', serif;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
@ -253,7 +253,7 @@ ul#nav li.current a { color: #11ABB0; }
|
|||||||
}
|
}
|
||||||
#about .profile-pic {
|
#about .profile-pic {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 120px;
|
width: 160px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
#about .contact-details { width: 41.66667%; }
|
#about .contact-details { width: 41.66667%; }
|
||||||
@ -877,29 +877,18 @@ call-to-action .button {
|
|||||||
padding-bottom: 70px;
|
padding-bottom: 70px;
|
||||||
color: #636363;
|
color: #636363;
|
||||||
}
|
}
|
||||||
#contact .section-head { margin-bottom: 42px; }
|
#contact .section-head { margin-bottom: 20px; }
|
||||||
|
|
||||||
#contact a, #contact a:visited { color: #11ABB0; }
|
#contact a, #contact a:visited { color: #11ABB0; }
|
||||||
#contact a:hover, #contact a:focus { color: #fff; }
|
#contact a:hover, #contact a:focus { color: #fff; }
|
||||||
|
|
||||||
#contact h1 {
|
#contact h1 {
|
||||||
font: 18px/24px 'opensans-bold', sans-serif;
|
font: 39px/50px 'librebaskerville-italic', serif;
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
color: #EBEEEE;
|
text-align: center;
|
||||||
margin-bottom: 6px;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
#contact h1 span { display: none; }
|
#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 {
|
#contact h4 {
|
||||||
font: 16px/24px 'opensans-bold', sans-serif;
|
font: 16px/24px 'opensans-bold', sans-serif;
|
||||||
@ -912,108 +901,115 @@ call-to-action .button {
|
|||||||
}
|
}
|
||||||
#contact .header-col { padding-top: 0px; }
|
#contact .header-col { padding-top: 0px; }
|
||||||
|
|
||||||
|
#contact li {
|
||||||
/* 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;
|
|
||||||
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;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 18px;
|
font:22px/1.1em 'hackregular', monospace;
|
||||||
top: 17px;
|
vertical-align: middle;
|
||||||
|
text-align: right;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-detail-wrapper {
|
#contact ul {
|
||||||
padding-top: 10px;
|
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;
|
||||||
|
text-align: center;
|
||||||
|
width: 180px;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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 {
|
.contact-column-wrapper {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#contact-fa {
|
#contact-fa {
|
||||||
font-size: 25px;
|
font-size: 28px;
|
||||||
|
vertical-align: top;
|
||||||
float: left;
|
float: left;
|
||||||
margin-top: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#contact-phone {
|
#contact-phone {
|
||||||
font-size: 20px;
|
margin-top: 3px;
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 7px;
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#contact-email {
|
#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;
|
float: left;
|
||||||
margin-left: 7px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#contact-pgp {
|
#contact-pgp {
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 7px;
|
margin-left: 12px;
|
||||||
font:20px/1.1em 'hackregular', monospace;
|
|
||||||
margin-top: -4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fixes for contact details really small screens */
|
/* Fixes for contact details really small screens */
|
||||||
|
|||||||
14
images/riot.svg
Normal file
14
images/riot.svg
Normal file
@ -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 |
112
index.html
112
index.html
@ -491,81 +491,65 @@
|
|||||||
================================================== -->
|
================================================== -->
|
||||||
<section id="contact">
|
<section id="contact">
|
||||||
<div class="row section-head">
|
<div class="row section-head">
|
||||||
<div class="two columns header-col">
|
<div class="twelve columns header-col">
|
||||||
<h1></h1>
|
<h1>Get in Touch</h1>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ten columns">
|
<div class="row">
|
||||||
<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.
|
<div class="twelve columns">
|
||||||
|
<p class="contacttext">Do you have any further questions? Please don't hesitate to reach out to me!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Contact details -->
|
<!-- Contact details -->
|
||||||
<div class="contact-detail-wrapper">
|
<div class="row" id="row-businesscard">
|
||||||
<div class="three columns contact-column-wrapper">
|
<div class="one columns"></div>
|
||||||
<i class="fa fa-phone-square" id="contact-fa"></i>
|
<div class="five columns contact-left businesscard">
|
||||||
<p id="contact-phone">+49 176 386 635 87</p>
|
<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">
|
|
||||||
</div>-->
|
</div>
|
||||||
<div class="four columns contact-column-wrapper">
|
<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>
|
<i class="fa fa-envelope" id="contact-fa"></i>
|
||||||
<p id="contact-email">dennis@dennispotter.eu</p>
|
<p id="contact-email">dennis@dennispotter.eu</p>
|
||||||
</div>
|
</li>
|
||||||
<div class="five columns contact-column-wrapper">
|
<li>
|
||||||
<i class="fa fa-key" id="contact-fa"></i>
|
<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>
|
<p id="contact-pgp">3164 394F FBBF 6F3B AE6A<br />D43B 186A 8AD4 4094 2BAF</p>
|
||||||
</div>
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="one columns"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- form -->
|
<div class="twelve columns" style="text-align: center; margin-top: 40px;">
|
||||||
<form action="" method="post" id="contactForm" name="contactForm">
|
<i>Download my information as vCard</i>
|
||||||
<div class="six columns">
|
</div>
|
||||||
<div>
|
|
||||||
<label for="contactName">Name <span class="required">*</span></label>
|
|
||||||
<input type="text" value="" size="35" id="contactName" name="contactName">
|
|
||||||
</div>
|
</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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section> <!-- Contact Section End-->
|
</section> <!-- Contact Section End-->
|
||||||
|
|
||||||
|
|
||||||
@ -573,24 +557,8 @@
|
|||||||
================================================== -->
|
================================================== -->
|
||||||
<footer>
|
<footer>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row" style="height: 200px;">
|
||||||
|
|
||||||
<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 id="go-top"><a class="smoothscroll" title="Back to Top" href="#home"><i class="icon-up-open"></i></a></div>
|
<div id="go-top"><a class="smoothscroll" title="Back to Top" href="#home"><i class="icon-up-open"></i></a></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</footer> <!-- Footer End-->
|
</footer> <!-- Footer End-->
|
||||||
|
|||||||
44
js/init.js
44
js/init.js
@ -156,48 +156,12 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
/*----------------------------------------------------*/
|
/*----------------------------------------------------*/
|
||||||
/* contact form
|
/* contact
|
||||||
------------------------------------------------------*/
|
------------------------------------------------------*/
|
||||||
|
|
||||||
$('form#contactForm button.submit').click(function() {
|
// Adapt Riot logo to format of fontawesome icons
|
||||||
|
var faHeight = document.getElementById('contact-fa').clientHeight * 1.3;
|
||||||
$('#image-loader').fadeIn();
|
document.getElementById('contact-riot-logo').setAttribute("style","height:"+faHeight+"px; width:"+faHeight+"px");
|
||||||
|
|
||||||
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;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user