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:
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user