<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Profile Concept</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="main">
<div class="bio"><img class="profile-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/735173/me.jpg"/>
<h3 class="header">Alex Boffey</h3>
<p>Front-end developer, musician & Costa club card holder. I'm interested in design, performance & the future of the web...</p><a class="bio-link" href="https://twitter.com/alexboffey">Twitter<i class="fa fa-twitter"></i></a><a class="bio-link" href="https://github.com/alexboffey">Github<i class="fa fa-github"></i></a><a class="bio-link" href="https://codepen.io/alexboffey/">CodePen<i class="fa fa-codepen"></i></a>
</div>
<div class="contact">
<form id="form">
<legend class="header">Get In Touch</legend>
<fieldset>
<label class="fa fa-user" for="name-input" aria-hidden="true"></label>
<input type="text" placeholder="Your name..." id="name-input"/>
</fieldset>
<fieldset>
<label class="fa fa-envelope" for="email-input" aria-hidden="true"></label>
<input type="email" placeholder="Your email..." id="email-input"/>
</fieldset>
<fieldset>
<label class="fa fa-comment" for="message-input" aria-hidden="true"></label>
<textarea placeholder="Your Message..." id="message-input"></textarea>
</fieldset>
<fieldset>
<button type="submit" id="btn-submit">Send</button>
</fieldset>
</form>
</div>
</div>
<!-- partial -->
</body>
</html>
@import "https://fonts.googleapis.com/css?family=Karla";
:root {
font-size: 13px;
}
@media screen and (min-width: 1000px) {
:root {
font-size: 14px;
}
}
@media screen and (min-width: 1240px) {
:root {
font-size: 16px;
}
}
@media screen and (min-width: 1480px) {
:root {
font-size: 17px;
}
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Karla';
font-size: 1rem;
font-weight: 300;
color: #EEEEEE;
line-height: 2em;
background: #EEEEEE;
}
.main {
display: flex;
justify-content: space-around;
align-items: baseline;
height: 100vh;
background: linear-gradient(120deg, #383745 50%, #22202B 50%);
}
.main .header,
.main legend.header {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.25rem;
margin: 0.5em 0;
}
.main .bio,
.main .contact {
max-width: 320px;
margin-top: 20vh;
}
.main .bio .profile-img {
max-width: 7em;
border-radius: 50%;
}
.main .bio .bio-link {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1rem;
display: inline-block;
float: left;
clear: left;
text-decoration: none;
color: #EEEEEE;
margin-bottom: 0.25em;
transition: color 300ms ease-in-out;
}
.main .bio .bio-link i {
margin-left: 8px;
}
.main .bio .bio-link::after {
display: block;
content: '';
height: 1px;
width: 0;
background: #CA8D6E;
transition: width 300ms ease-in-out;
}
.main .bio .bio-link:hover::after {
width: 100%;
}
.main .bio .bio-link:hover {
color: #CA8D6E;
}
.main .contact {
color: #CA8D6E;
}
.main .contact form fieldset {
font-size: 1rem;
position: relative;
border: none;
margin-bottom: 0.25em;
padding: 0.25em 0;
}
.main .contact form fieldset label {
font-size: 0.875rem;
display: block;
position: absolute;
right: 0.125em;
top: 1.5em;
color: #CA8D6E;
}
.main .contact form input,
.main .contact form textarea,
.main .contact form button {
border: 0;
}
.main .contact form input:focus,
.main .contact form textarea:focus,
.main .contact form button:focus {
outline: none;
}
.main .contact form input,
.main .contact form textarea {
display: block;
font-family: 'Karla';
font-size: 1rem;
padding: 0.5em 0;
width: 280px;
background: none;
color: #CA8D6E;
border-bottom: 1px solid #7D6962;
transition: border 300ms ease-in-out;
}
.main .contact form input:focus,
.main .contact form textarea:focus {
border-bottom: 1px solid #CA8D6E;
}
.main .contact form input::-webkit-input-placeholder,
.main .contact form textarea::-webkit-input-placeholder {
color: #7D6962;
}
.main .contact form input:-ms-input-placeholder,
.main .contact form textarea:-ms-input-placeholder {
color: #7D6962;
}
.main .contact form input::-ms-input-placeholder,
.main .contact form textarea::-ms-input-placeholder {
color: #7D6962;
}
.main .contact form input::placeholder,
.main .contact form textarea::placeholder {
color: #7D6962;
}
.main .contact button {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1rem;
display: block;
background: #CA8D6E;
color: #EEEEEE;
padding: 1em 2em;
box-shadow: 0 0 40px 0 rgba(21, 21, 21, 0.6);
}
.main .contact button:hover {
-webkit-animation: swell 500ms ease-in-out;
animation: swell 500ms ease-in-out;
cursor: pointer;
}
.main .contact textarea {
resize: none;
}
.main {
overflow: hidden;
-webkit-animation: Page 600ms ease-in-out forwards;
animation: Page 600ms ease-in-out forwards;
}
.bio {
-webkit-animation: Bio 600ms ease-in-out forwards;
animation: Bio 600ms ease-in-out forwards;
}
.contact {
-webkit-animation: Contact 600ms ease-in-out forwards;
animation: Contact 600ms ease-in-out forwards;
}
@-webkit-keyframes Page {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes Page {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes Bio {
0% {
-webkit-transform: translateX(-50vw);
transform: translateX(-50vw);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes Bio {
0% {
-webkit-transform: translateX(-50vw);
transform: translateX(-50vw);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes Contact {
0% {
-webkit-transform: translateX(50vw);
transform: translateX(50vw);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes Contact {
0% {
-webkit-transform: translateX(50vw);
transform: translateX(50vw);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes swell {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes swell {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}