<html>
<head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="hhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="js/script.js"></script>
</head>
<div class="container">
<!--bow-->
<div class="bow animated" id="bow"> <img src="https://ih1.redbubble.net/image.92482116.4302/sticker,375x360.u1.png" alt="bow" class="animated slideInDown forward" width="200"> </div> <img src="img/pinkbg.jpg" class="pink-bg" width="2000">
<aside class="profile-card">
<header>
<!-- my avatar -->
<a target="_blank" href="index.html"><img src="https://scontent.fykz1-1.fna.fbcdn.net/v/t1.0-9/15179220_10209387183110536_3201148515889651137_n.jpg?oh=2e04c8a683c3fdaf08d5b0cb0c6616a4&oe=58FE712F" class="hoverZoomLink" id="avatar"></a>
<!-- the username -->
<h1 class="animated rubberBand delay" id="rubberBand" onclick="changeBG('rubberBand','#ffdcbc');">
Julianna Dioguardi
</h1>
<!-- and role or location -->
<h2 class="animated flipInY delay" id="media" onclick="myFunction()">
Interactive Media Design
</h2> </header>
<!-- bit of a bio -->
<div class="profile-bio">
<h1>
<a href="" class="typewrite" data-period="2000" data-type='[ "Hi, Im Julianna Dioguardi.", "I am Creative and I Love Design.", "Interactive Media Design Student.", "Videography and Photography enthusiast.", "HTML, CSS, and little bit of JavaScript." ]'>
<span class="wrap"></span>
</a>
</h1>
<p class="bio">I am currently a student in the IMD program. I enjoy web design, development, photography and videography. Avid gamer and cat video enthusiast.</p>
</div>
</aside>
</div>
</html>@import url('https://fonts.googleapis.com/css?family=Sacramento');
@import url('https://fonts.googleapis.com/css?family=Wire+One');
html {
height: 100%;
}
body {
overflow: hidden;
background: #ffd6e6 no-repeat center center fixed;
background-size: cover;
position: fixed;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
font: normal 14px/1.618em "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
}
body:before {
content: "";
height: 0px;
padding: 0px;
border: 130em solid #fff4f9;
position: absolute;
left: 50%;
top: 100%;
z-index: 2;
display: block;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
}
.container{
margin: 0 auto;
}
.bow{
text-align: center;
margin: 0 auto;
position: relative;
z-index: 99;
top: -10px;
opacity: 0.5;
}
.pink-bg{
background-size: cover;
position: relative;
bottom: 400px;
opacity: 0.5;
}
#media:hover{
cursor: pointer;
}
h1,
h2 {
font-weight: 500;
margin: 0px 0px 5px 0px;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 16px;
}
#bow:hover{
animation: scale;
animation-duration: 1.5s;
}
#rubberBand {
animation-duration: 3s;
animation-delay: 3.5s;
animation-iteration-count: forwards;
cursor: pointer;
}
#media{
margin-top: 6px;
animation-duration: 3s;
animation-delay: 4.5s;
animation-iteration-count: forwards;
}
.media:hover{
cursor: pointer;
}
.profile-card {
background: #ffe6f4;
width: 56px;
height: 56px;
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
overflow: hidden;
opacity: 0;
margin-top: 70px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
-webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}
.profile-card header {
width: 179px;
height: 220px;
padding: 40px 20px 30px 20px;
display: inline-block;
float: left;
border-right: 2px dashed #EEEEEE;
background: #FFFFFF;
color: #000000;
margin-top: 50px;
opacity: 0;
text-align: center;
-webkit-animation: moveIn 1s 3.1s ease forwards;
animation: moveIn 1s 3.1s ease forwards;
}
.profile-card header h1 {
color: #ff94bd;
font-family: 'Sacramento', 'cursive';
font-size: 2.em;
font-weight: bold;
}
.profile-card header a {
display: inline-block;
text-align: center;
position: relative;
margin: 25px 30px;
}
.profile-card header a > img {
width: 120px;
max-width: 100%;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transition: -webkit-box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
-webkit-box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
}
.profile-card header a:hover > img {
animation: spin;
animation-duration: 1.5s;
-webkit-box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
}
.profile-card .profile-bio {
width: 175px;
height: 180px;
display: inline-block;
float: right;
padding: 50px 20px 30px 20px;
background: #FFFFFF;
color: #333333;
margin-top: 50px;
text-align: center;
opacity: 0;
-webkit-animation: moveIn 1s 3.1s ease forwards;
animation: moveIn 1s 3.1s ease forwards;
}
.typewrite{
text-decoration: none;
color: black;
margin: 0 auto;
text-align: center;
font-family: 'Wire One', sans-serif;
}
.bio{
margin-top: 25px;
font-size: 11px;
}
.profile-social-links {
width: 218px;
display: inline-block;
float: right;
margin: 0px;
padding: 15px 20px;
background: #FFFFFF;
margin-top: 50px;
text-align: center;
opacity: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-animation: moveIn 1s 3.1s ease forwards;
animation: moveIn 1s 3.1s ease forwards;
}
.profile-social-links li {
list-style: none;
margin: -5px 0px 0px 0px;
padding: 0px;
float: left;
width: 25%;
text-align: center;
}
.profile-social-links li a {
display: inline-block;
color: lightpink;
width: 24px;
height: 24px;
padding: 6px;
position: relative;
overflow: hidden!important;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.profile-social-links li a i {
position: relative;
z-index: 1;
}
.profile-social-links li a img,
.profile-social-links li a svg {
width: 24px;
}
.profile-social-links li a:hover{
opacity: 0.3;
transform:translateY(3px);
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
@-webkit-keyframes init {
0% {
width: 0px;
height: 0px;
}
100% {
width: 56px;
height: 56px;
margin-top: 0px;
opacity: 1;
}
}
@keyframes init {
0% {
width: 0px;
height: 0px;
}
100% {
width: 56px;
height: 56px;
margin-top: 0px;
opacity: 1;
}
}
@-webkit-keyframes puff {
0% {
top: 100%;
height: 0px;
padding: 0px;
}
100% {
top: 50%;
height: 100%;
padding: 0px 100%;
}
}
@keyframes puff {
0% {
top: 100%;
height: 0px;
padding: 0px;
}
100% {
top: 50%;
height: 100%;
padding: 0px 100%;
}
}
@-webkit-keyframes borderRadius {
0% {
-webkit-border-radius: 50%;
}
100% {
-webkit-border-radius: 0px;
}
}
@keyframes borderRadius {
0% {
-webkit-border-radius: 50%;
}
100% {
border-radius: 0px;
}
}
@-webkit-keyframes moveDown {
0% {
top: 50%;
}
50% {
top: 40%;
}
100% {
top: 100%;
}
}
@keyframes moveDown {
0% {
top: 50%;
}
50% {
top: 40%;
}
100% {
top: 100%;
}
}
@-webkit-keyframes moveUp {
0% {
background: #FFB300;
top: 100%;
}
50% {
top: 40%;
}
100% {
top: 50%;
background: #E0E0E0;
}
}
@keyframes moveUp {
0% {
background: #FFB300;
top: 100%;
}
50% {
top: 40%;
}
100% {
top: 50%;
background: #E0E0E0;
}
}
@-webkit-keyframes materia {
0% {
background: #E0E0E0;
}
50% {
-webkit-border-radius: 4px;
}
100% {
width: 440px;
height: 280px;
background: #FFFFFF;
-webkit-border-radius: 4px;
}
}
@keyframes materia {
0% {
background: #E0E0E0;
}
50% {
border-radius: 4px;
}
100% {
width: 440px;
height: 280px;
background: #FFFFFF;
border-radius: 4px;
}
}
@-webkit-keyframes moveIn {
0% {
margin-top: 50px;
opacity: 0;
}
100% {
opacity: 1;
margin-top: -20px;
}
}
@keyframes moveIn {
0% {
margin-top: 50px;
opacity: 0;
}
100% {
opacity: 1;
margin-top: -20px;
}
}
@-webkit-keyframes scaleIn {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes scaleIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes ripple {
0% {
transform: scale3d(0, 0, 0);
}
50%,
100% {
-webkit-transform: scale3d(1, 1, 1);
}
100% {
opacity: 0;
}
}
@keyframes ripple {
0% {
transform: scale3d(0, 0, 0);
}
50%,
100% {
transform: scale3d(1, 1, 1);
}
100% {
opacity: 0;
}
}
@media screen and (min-aspect-ratio: 4/3) {
body {
background-size: cover;
}
body:before {
width: 0px;
}
@ -webkit-keyframes puff {
0% {
top: 100%;
width: 0px;
padding-bottom: 0px;
}
100% {
top: 50%;
width: 100%;
padding-bottom: 100%;
}
}
@keyframes puff {
0% {
top: 100%;
width: 0px;
padding-bottom: 0px;
}
100% {
top: 50%;
width: 100%;
padding-bottom: 100%;
}
}
}
@media screen and (min-height: 480px) {
.profile-card header {
width: auto;
height: auto;
padding: 30px 20px;
display: block;
float: none;
border-right: none;
}
.profile-card .profile-bio {
width: auto;
height: auto;
padding: 15px 20px 30px 20px;
display: block;
float: none;
}
.profile-social-links {
width: 100%;
display: block;
float: none;
}
@ -webkit-keyframes materia {
0% {
background: #E0E0E0;
}
50% {
-webkit-border-radius: 4px;
}
100% {
width: 280px;
height: 440px;
background: #FFFFFF;
-webkit-border-radius: 4px;
}
}
@keyframes materia {
0% {
background: #E0E0E0;
}
50% {
border-radius: 4px;
}
100% {
width: 280px;
height: 440px;
background: #FFFFFF;
border-radius: 4px;
}
}
}
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
var that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting) { delta /= 2; }
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function() {
that.tick();
}, delta);
};
window.onload = function() {
var elements = document.getElementsByClassName('typewrite');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
document.body.appendChild(bio);
};
function myFunction() {
document.getElementById("media").style.color = "red";
}
function changeBG(el,clr){
var elem = document.getElementById(el);
elem.style.transition = "background 1s linear 0s";
elem.style.background = clr;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.