<div id="offpage">
<div class="loader center">
<h4 class="fadeInUp">Johnny Bravo</h4>
<h5 class="fadeInUp delay">Photography</h5>
</div>
<div class="loader2"></div>
</div><!-- #offpage -->
<div class="content animate">
Welcome to my website
<br/>
<br/>
<img src="https://rccl-h.assetsadobe.com/is/image/content/dam/royal/data/ports/los-angeles-california/overview/los-angeles-california-venice-beach-aerial.jpg?$750x320$" width="1000" height="auto">
</div>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html, body {
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent!important;
cursor: url("../img/cursor1x.png") 6 6, default;
cursor: -webkit-image-set(url("../img/cursor1x.png") 1x, url("../img/cursor2x.png") 2x) 6 6, default;
padding:0;
margin:0;
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
position: absolute;
display: none;
}
.content {
max-width: 80%;
margin: 0 auto;
font-size: 24px;
padding-top: 10%;
}
.loader{
background-color: #000000;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
opacity:0;
z-index: 9;
transform:translateY(-100%);
-webkit-animation:loader 1.2s cubic-bezier(0.5, 0.6, 0.2, 1);
-moz-animation:loader 1.2s cubic-bezier(0.5, 0.6, 0.2, 1);
animation:loader 1.2s cubic-bezier(0.5, 0.6, 0.2, 1);
-webkit-animation-fill-mode:backwards;
-moz-animation-fill-mode:backwards;
animation-fill-mode:backwards;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
@-webkit-keyframes loader {
0% {
opacity:1;
transform:translateY(0%);
}
100% {
opacity:1;
transform:translateY(-100%);
}
}
@keyframes loader {
0% {
opacity:1;
transform:translateY(0%);
}
100% {
opacity:1;
transform:translateY(-100%);
}
}
.loader2 {
background-color: #dddddd;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
opacity:0;
z-index: 5;
transform:translateY(-100%);
-webkit-animation:loader .8s cubic-bezier(0.5, 0.6, 0.2, 1);
-moz-animation:loader .8s cubic-bezier(0.5, 0.6, 0.2, 1);
animation:loader .8s cubic-bezier(0.5, 0.6, 0.2, 1);
-webkit-animation-fill-mode:backwards;
-moz-animation-fill-mode:backwards;
animation-fill-mode:backwards;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
@-webkit-keyframes loader {
0% {
opacity:1;
transform:translateY(0%);
}
100% {
opacity:1;
transform:translateY(-100%);
}
}
@keyframes loader {
0% {
opacity:1;
transform:translateY(0%);
}
100% {
opacity:1;
transform:translateY(-100%);
}
}
.center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
width: 100%;
}
h4 {
color: #ffffff;
font-size: 32px;
line-height: 110%;
font-family:"Medium";
position: absolute;
}
h5 {
color: #999999;
font-size: 16px;
line-height: 110%;
font-family:"Regular";
margin-top: 80px;
}
.fadeInUp {
-webkit-animation:fadeInUp 1.6s cubic-bezier(0.2, 0.6, 0.2, 1);
-moz-animation:fadeInUp 1.6s cubic-bezier(0.2, 0.6, 0.2, 1);
animation:fadeInUp 1.6s cubic-bezier(0.2, 0.6, 0.2, 1);
-webkit-animation-fill-mode:backwards;
-moz-animation-fill-mode:backwards;
animation-fill-mode:backwards;
-webkit-animation-delay: .2s;
animation-delay: .2s;
}
.delay {
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(30px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animate {
-webkit-animation:animate 1.2s cubic-bezier(0.2, 0.6, 0.2, 1);
-moz-animation:animate 1.2s cubic-bezier(0.2, 0.6, 0.2, 1);
animation:animate 1.2s cubic-bezier(0.2, 0.6, 0.2, 1);
-webkit-animation-fill-mode:backwards;
-moz-animation-fill-mode:backwards;
animation-fill-mode:backwards;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
@-webkit-keyframes animate {
0% {
-webkit-transform: translateY(100%);
}
100% {
-webkit-transform: translateY(0%);
}
}
@keyframes animate {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.