From c800dbeb4896cc17c3ee64033f0613267305f89f Mon Sep 17 00:00:00 2001 From: Dennis Date: Mon, 16 Jul 2018 01:12:22 +0200 Subject: [PATCH] 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 --- css/default.css | 5 +- css/layout.css | 182 +++++++++++++++++++++++------------------------- images/riot.svg | 14 ++++ index.html | 138 ++++++++++++++---------------------- js/init.js | 46 ++---------- 5 files changed, 164 insertions(+), 221 deletions(-) create mode 100644 images/riot.svg diff --git a/css/default.css b/css/default.css index 9b15395..c0dc40f 100755 --- a/css/default.css +++ b/css/default.css @@ -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) { diff --git a/css/layout.css b/css/layout.css index ec3567b..5243873 100755 --- a/css/layout.css +++ b/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 */ diff --git a/images/riot.svg b/images/riot.svg new file mode 100644 index 0000000..c03e177 --- /dev/null +++ b/images/riot.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/index.html b/index.html index 8ca62c6..3487add 100755 --- a/index.html +++ b/index.html @@ -491,81 +491,65 @@ ================================================== -->
-
-

+
+

Get in Touch

- -
-

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. -

-
- - -
-
- -

+49 176 386 635 87

-
- -
- -

dennis@dennispotter.eu

-
-
- -

3164 394F FBBF 6F3B AE6A
D43B 186A 8AD4 4094 2BAF

-
- -
- -
- -
- -
-
-
- - -
- -
- - -
- -
- - -
- -
-
- - -
- -
- - - - -
-
- -
-
Error boy
- -
- Your message was sent, thank you!
-
+

Do you have any further questions? Please don't hesitate to reach out to me! +

+ + +
+
+
+ +

Dennis Potter

+
+
    • +
    • +
    • +
    • +
    • +
    + +
    +
    +
      +
    • + +

      +49 176 386 635 87

      +
      • +
    • + +

      @dennis:dennispotter.eu

      +
      • +
    • + +

      dennis@dennispotter.eu

      +
      • +
    • + +

      3164 394F FBBF 6F3B AE6A
      D43B 186A 8AD4 4094 2BAF

      +
      • +
    + +
    + + +
    +
    + +
    +
    + Download my information as vCard +
    +
    +
    @@ -573,24 +557,8 @@ ================================================== --> diff --git a/js/init.js b/js/init.js index a26e234..1e1ad59 100755 --- a/js/init.js +++ b/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"); });