<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrapper">
<div class="infobox">
<div class="info">
<div class="subtitle">
<span>designer by day</span>
</div>
<div class="title">
<div class="lantern">
<div class="hook">
</div>
<div class="circle">
<div class="glow">
</div>
</div>
</div>
<h1>Anna Ma</h1>
<div class="lantern">
<div class="hook">
</div>
<div class="circle">
<div class="glow">
</div>
</div>
</div>
</div>
<div class="subtitle">
<span>manga reader by night</span>
</div>
<div class="links">
<a href="#">codepen</a>
<a href="#">github</a>
<a href="#">resume</a>
</div>
</div>
</div>
</div>
<!--<div class="terminal">
Anna-Ma:~ Morning$ cd bio
<br/> Anna-Ma:bio~ Morning$ display intro
<br/> Hello there!
<br/> This is Anna Ma's website.
<br/> It's an attempt to show that I know a little of web designing.
<br/> Also to practice front-end web dev.
</div>--!>
</div>
@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic);
@import url(https://fonts.googleapis.com/css?family=Alegreya:400,400italic,700italic,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic);
body {
font-family: "Libre Baskerville", serif;
font-size: 62.5%;
background: #141414;
color: #ffdada;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body:before, body:after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
background: url(http://static.asiawebdirect.com/m/phuket/portals/japan-hotels-ws/homepage/tokyo/shibuya/nightlife/pagePropertiesImage/Shibuya%20Nightlife.jpg);
background-size: cover;
background-position: center center;
height: 100vh;
z-index: -100;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}
body:after {
background: rgba(0, 0, 0, 0.6);
z-index: -90;
}
.wrapper {
height: 100%;
top: 0;
left: 0;
position: fixed;
text-align: center;
width: 100%;
}
.wrapper:before {
content: "";
display: inline-block;
height: 100%;
margin-right: 0;
vertical-align: middle;
width: 1px;
}
.info {
-webkit-animation: info-appear 3s 1;
-moz-animation: info-appear 3s 1;
-o-animation: info-appear 3s 1;
animation: info-appear 3s 1;
}
.infobox {
width: 600px;
display: inline-block;
position: relative;
top: 0;
vertical-align: middle;
text-align: center;
/*.title
* overlay: hidden
* h1
* display: inline-block
* width: 300px
* font-family: 'Oswald', serif
* font-weight: 400
* font-size: 6em
* text-transform: uppercase
* background: #141414
* padding: 20px
* border: 1px solid black
*
* h1:nth-child(2), h1:nth-child(3)
* background: white
* color: #141414
* margin-top: -20px
*
* &:before
* content: ' '
* width: 100% */
/*.terminal
* position: relative
* top: 0
* left: 0
* right: 0
* background: rgba(0, 0, 0, 0.7)
* border-top: 15px solid white
* border-radius: 0.5em
* text-align: left
* padding: 10px
* font-size: 1.4em
* word-spacing: 0.3em
*
* &:before
* content: ' '
* position: absolute
* top: -12px
* left: 10px
* width: 10px
* height: 10px
* border-radius: 50%
* background: pink */
}
.infobox:before {
position: absolute;
left: 0;
top: 0;
content: " ";
background: white;
width: 0;
height: 0;
overflow: visible;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
-webkit-animation: opening-left 2s 1;
-moz-animation: opening-left 2s 1;
-o-animation: opening-left 2s 1;
animation: opening-left 2s 1;
}
.infobox:after {
position: absolute;
right: 0;
bottom: 0;
content: " ";
background: white;
width: 0;
height: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
overflow: visible;
-webkit-animation: opening-right 2s 1;
-moz-animation: opening-right 2s 1;
-o-animation: opening-right 2s 1;
animation: opening-right 2s 1;
}
.infobox .title {
margin: 0 auto;
text-align: center;
position: relative;
margin-top: -30px;
margin-bottom: -30px;
}
.infobox .title h1 {
display: inline-block;
text-transform: uppercase;
font-size: 5em;
letter-spacing: 0.25em;
margin-right: -0.3em;
position: relative;
font-weight: 300;
}
.infobox .links {
margin-bottom: 10px;
margin-top: 50px;
}
.infobox .links a, .infobox .links a:hover, .infobox .links a:visited {
font-family: "Open Sans", sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 2.2em;
font-weight: 300;
color: pink;
letter-spacing: 0.3em;
border: 1px solid pink;
padding-left: 0.3em;
-webkit-animation: bg 1.2s 2s ease-in-out 1;
-moz-animation: bg 1.2s 2s ease-in-out 1;
-o-animation: bg 1.2s 2s ease-in-out 1;
animation: bg 1.2s 2s ease-in-out 1;
}
.infobox .links a:nth-child(2), .infobox .links a:hover:nth-child(2), .infobox .links a:visited:nth-child(2) {
margin-left: 10px;
margin-right: 10px;
-webkit-animation-delay: 2.2s;
-moz-animation-delay: 2.2s;
-o-animation-delay: 2.2s;
animation-delay: 2.2s;
}
.infobox .links a:nth-child(3), .infobox .links a:hover:nth-child(3), .infobox .links a:visited:nth-child(3) {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
-o-animation-delay: 2.4s;
animation-delay: 2.4s;
}
.infobox .links a:hover {
background: yellow;
color: #141414;
}
.infobox .subtitle {
clear: both;
position: relative;
color: pink;
}
.infobox .subtitle:before, .infobox .subtitle:after {
content: " ";
position: absolute;
top: 0;
width: 30%;
height: 50%;
border-bottom: 1px dotted Crimson;
}
.infobox .subtitle:before {
left: 0;
}
.infobox .subtitle:after {
right: 0;
}
.infobox .subtitle span {
font-family: "Alegreya", serif;
font-size: 2.5em;
font-weight: 400;
font-style: italic;
}
.lantern {
position: relative;
display: inline-block;
width: 60px;
top: 5px;
margin-left: 20px;
margin-right: 20px;
}
.lantern .hook {
position: relative;
width: 10px;
height: 5px;
background: black;
margin: 0 auto;
margin-top: 10px;
-webkit-box-shadow: 0 55px 0 0px #000;
-moz-box-shadow: 0 55px 0 0px #000;
-o-box-shadow: 0 55px 0 0px #000;
box-shadow: 0 55px 0 0px #000;
/*&:before
* content: ' '
* position: absolute
* top: -5px
* left: 50%
* transform: translateX(-50%)
* width: 6px
* height: 5px
* border-radius: 50% 50% 0 0
* border-left: 2px solid black
* border-right: 2px solid black
* border-top: 2px solid black
* z-index: -1 */
}
.lantern .circle {
width: 60px;
height: 50px;
border-radius: 50%;
background: #ff6666;
position: relative;
-webkit-box-shadow: 0 0 20px 0px white;
-moz-box-shadow: 0 0 20px 0px white;
-o-box-shadow: 0 0 20px 0px white;
box-shadow: 0 0 20px 0px white;
}
.lantern .circle:before {
content: " ";
position: absolute;
bottom: 0;
margin: auto;
left: 0;
right: 0;
background: transparent;
border-left: 2px solid rgba(204, 82, 82, 0.8);
border-right: 2px solid rgba(204, 82, 82, 0.8);
width: 15px;
height: 50px;
border-radius: 50%;
z-index: 1;
}
.lantern .circle:after {
content: " ";
position: absolute;
bottom: 0;
margin: auto;
left: 0;
right: 0;
background: transparent;
border-left: 2px solid rgba(204, 82, 82, 0.9);
border-right: 2px solid rgba(204, 82, 82, 0.9);
width: 40px;
height: 50px;
border-radius: 50%;
z-index: 1;
}
.lantern .circle .glow {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
width: 0;
height: 0;
background: rgba(255, 255, 0, 0.7);
-webkit-box-shadow: 0 0 15px 10px yellow;
-moz-box-shadow: 0 0 15px 10px yellow;
-o-box-shadow: 0 0 15px 10px yellow;
box-shadow: 0 0 15px 10px yellow;
border-radius: 50%;
margin: 0 auto;
-webkit-animation: lantern 2s infinite ease-in-out forwards;
-moz-animation: lantern 2s infinite ease-in-out forwards;
-o-animation: lantern 2s infinite ease-in-out forwards;
animation: lantern 2s infinite ease-in-out forwards;
}
@-webkit-keyframes opening-left {
from {
left: 30%;
top: 30%;
height: 0;
width: 1px;
}
50% {
left: 30%;
top: 30%;
height: 200px;
width: 1px;
}
90% {
left: 0;
top: 0;
}
to {
left: 0;
top: 0;
height: 0;
}
}
@-moz-keyframes opening-left {
from {
left: 30%;
top: 30%;
height: 0;
width: 1px;
}
50% {
left: 30%;
top: 30%;
height: 200px;
width: 1px;
}
90% {
left: 0;
top: 0;
}
to {
left: 0;
top: 0;
height: 0;
}
}
@-o-keyframes opening-left {
from {
left: 30%;
top: 30%;
height: 0;
width: 1px;
}
50% {
left: 30%;
top: 30%;
height: 200px;
width: 1px;
}
90% {
left: 0;
top: 0;
}
to {
left: 0;
top: 0;
height: 0;
}
}
@keyframes opening-left {
from {
left: 30%;
top: 30%;
height: 0;
width: 1px;
}
50% {
left: 30%;
top: 30%;
height: 200px;
width: 1px;
}
90% {
left: 0;
top: 0;
}
to {
left: 0;
top: 0;
height: 0;
}
}
@-webkit-keyframes opening-right {
from {
right: 30%;
bottom: 30%;
height: 0;
width: 1px;
}
50% {
right: 30%;
bottom: 30%;
height: 200px;
width: 1px;
}
90% {
right: 0;
bottom: 0;
}
to {
right: 0;
bottom: 0;
height: 0;
}
}
@-moz-keyframes opening-right {
from {
right: 30%;
bottom: 30%;
height: 0;
width: 1px;
}
50% {
right: 30%;
bottom: 30%;
height: 200px;
width: 1px;
}
90% {
right: 0;
bottom: 0;
}
to {
right: 0;
bottom: 0;
height: 0;
}
}
@-o-keyframes opening-right {
from {
right: 30%;
bottom: 30%;
height: 0;
width: 1px;
}
50% {
right: 30%;
bottom: 30%;
height: 200px;
width: 1px;
}
90% {
right: 0;
bottom: 0;
}
to {
right: 0;
bottom: 0;
height: 0;
}
}
@keyframes opening-right {
from {
right: 30%;
bottom: 30%;
height: 0;
width: 1px;
}
50% {
right: 30%;
bottom: 30%;
height: 200px;
width: 1px;
}
90% {
right: 0;
bottom: 0;
}
to {
right: 0;
bottom: 0;
height: 0;
}
}
@-webkit-keyframes info-appear {
from {
opacity: 0;
filter: blur(3px);
}
50% {
opacity: 0;
filter: blur(2px);
}
to {
opacity: 1;
}
}
@-moz-keyframes info-appear {
from {
opacity: 0;
filter: blur(3px);
}
50% {
opacity: 0;
filter: blur(2px);
}
to {
opacity: 1;
}
}
@-o-keyframes info-appear {
from {
opacity: 0;
filter: blur(3px);
}
50% {
opacity: 0;
filter: blur(2px);
}
to {
opacity: 1;
}
}
@keyframes info-appear {
from {
opacity: 0;
filter: blur(3px);
}
50% {
opacity: 0;
filter: blur(2px);
}
to {
opacity: 1;
}
}
@-webkit-keyframes bg {
from {
background: yellow;
color: #141414;
}
to {
background: transparent;
color: pink;
}
}
@-moz-keyframes bg {
from {
background: yellow;
color: #141414;
}
to {
background: transparent;
color: pink;
}
}
@-o-keyframes bg {
from {
background: yellow;
color: #141414;
}
to {
background: transparent;
color: pink;
}
}
@keyframes bg {
from {
background: yellow;
color: #141414;
}
to {
background: transparent;
color: pink;
}
}
@-webkit-keyframes lantern {
0%, 100% {
-webkit-box-shadow: 0 0 15px 10px yellow;
-moz-box-shadow: 0 0 15px 10px yellow;
-o-box-shadow: 0 0 15px 10px yellow;
box-shadow: 0 0 15px 10px yellow;
}
10%, 90% {
-webkit-box-shadow: 0 0 15px 11px yellow;
-moz-box-shadow: 0 0 15px 11px yellow;
-o-box-shadow: 0 0 15px 11px yellow;
box-shadow: 0 0 15px 11px yellow;
}
20%, 80% {
-webkit-box-shadow: 0 0 15px 12px yellow;
-moz-box-shadow: 0 0 15px 12px yellow;
-o-box-shadow: 0 0 15px 12px yellow;
box-shadow: 0 0 15px 12px yellow;
}
30%, 70% {
-webkit-box-shadow: 0 0 15px 13px yellow;
-moz-box-shadow: 0 0 15px 13px yellow;
-o-box-shadow: 0 0 15px 13px yellow;
box-shadow: 0 0 15px 13px yellow;
}
40%, 60% {
-webkit-box-shadow: 0 0 15px 14px yellow;
-moz-box-shadow: 0 0 15px 14px yellow;
-o-box-shadow: 0 0 15px 14px yellow;
box-shadow: 0 0 15px 14px yellow;
}
50% {
-webkit-box-shadow: 0 0 15px 15px yellow;
-moz-box-shadow: 0 0 15px 15px yellow;
-o-box-shadow: 0 0 15px 15px yellow;
box-shadow: 0 0 15px 15px yellow;
}
}
@-moz-keyframes lantern {
0%, 100% {
-webkit-box-shadow: 0 0 15px 10px yellow;
-moz-box-shadow: 0 0 15px 10px yellow;
-o-box-shadow: 0 0 15px 10px yellow;
box-shadow: 0 0 15px 10px yellow;
}
10%, 90% {
-webkit-box-shadow: 0 0 15px 11px yellow;
-moz-box-shadow: 0 0 15px 11px yellow;
-o-box-shadow: 0 0 15px 11px yellow;
box-shadow: 0 0 15px 11px yellow;
}
20%, 80% {
-webkit-box-shadow: 0 0 15px 12px yellow;
-moz-box-shadow: 0 0 15px 12px yellow;
-o-box-shadow: 0 0 15px 12px yellow;
box-shadow: 0 0 15px 12px yellow;
}
30%, 70% {
-webkit-box-shadow: 0 0 15px 13px yellow;
-moz-box-shadow: 0 0 15px 13px yellow;
-o-box-shadow: 0 0 15px 13px yellow;
box-shadow: 0 0 15px 13px yellow;
}
40%, 60% {
-webkit-box-shadow: 0 0 15px 14px yellow;
-moz-box-shadow: 0 0 15px 14px yellow;
-o-box-shadow: 0 0 15px 14px yellow;
box-shadow: 0 0 15px 14px yellow;
}
50% {
-webkit-box-shadow: 0 0 15px 15px yellow;
-moz-box-shadow: 0 0 15px 15px yellow;
-o-box-shadow: 0 0 15px 15px yellow;
box-shadow: 0 0 15px 15px yellow;
}
}
@-o-keyframes lantern {
0%, 100% {
-webkit-box-shadow: 0 0 15px 10px yellow;
-moz-box-shadow: 0 0 15px 10px yellow;
-o-box-shadow: 0 0 15px 10px yellow;
box-shadow: 0 0 15px 10px yellow;
}
10%, 90% {
-webkit-box-shadow: 0 0 15px 11px yellow;
-moz-box-shadow: 0 0 15px 11px yellow;
-o-box-shadow: 0 0 15px 11px yellow;
box-shadow: 0 0 15px 11px yellow;
}
20%, 80% {
-webkit-box-shadow: 0 0 15px 12px yellow;
-moz-box-shadow: 0 0 15px 12px yellow;
-o-box-shadow: 0 0 15px 12px yellow;
box-shadow: 0 0 15px 12px yellow;
}
30%, 70% {
-webkit-box-shadow: 0 0 15px 13px yellow;
-moz-box-shadow: 0 0 15px 13px yellow;
-o-box-shadow: 0 0 15px 13px yellow;
box-shadow: 0 0 15px 13px yellow;
}
40%, 60% {
-webkit-box-shadow: 0 0 15px 14px yellow;
-moz-box-shadow: 0 0 15px 14px yellow;
-o-box-shadow: 0 0 15px 14px yellow;
box-shadow: 0 0 15px 14px yellow;
}
50% {
-webkit-box-shadow: 0 0 15px 15px yellow;
-moz-box-shadow: 0 0 15px 15px yellow;
-o-box-shadow: 0 0 15px 15px yellow;
box-shadow: 0 0 15px 15px yellow;
}
}
@keyframes lantern {
0%, 100% {
-webkit-box-shadow: 0 0 15px 10px yellow;
-moz-box-shadow: 0 0 15px 10px yellow;
-o-box-shadow: 0 0 15px 10px yellow;
box-shadow: 0 0 15px 10px yellow;
}
10%, 90% {
-webkit-box-shadow: 0 0 15px 11px yellow;
-moz-box-shadow: 0 0 15px 11px yellow;
-o-box-shadow: 0 0 15px 11px yellow;
box-shadow: 0 0 15px 11px yellow;
}
20%, 80% {
-webkit-box-shadow: 0 0 15px 12px yellow;
-moz-box-shadow: 0 0 15px 12px yellow;
-o-box-shadow: 0 0 15px 12px yellow;
box-shadow: 0 0 15px 12px yellow;
}
30%, 70% {
-webkit-box-shadow: 0 0 15px 13px yellow;
-moz-box-shadow: 0 0 15px 13px yellow;
-o-box-shadow: 0 0 15px 13px yellow;
box-shadow: 0 0 15px 13px yellow;
}
40%, 60% {
-webkit-box-shadow: 0 0 15px 14px yellow;
-moz-box-shadow: 0 0 15px 14px yellow;
-o-box-shadow: 0 0 15px 14px yellow;
box-shadow: 0 0 15px 14px yellow;
}
50% {
-webkit-box-shadow: 0 0 15px 15px yellow;
-moz-box-shadow: 0 0 15px 15px yellow;
-o-box-shadow: 0 0 15px 15px yellow;
box-shadow: 0 0 15px 15px yellow;
}
}
