File: /var/www/kevin-demo/googlecloud.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome To Google Cloud | Kinsta</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<style type='text/css'>
/* CSS RESET */
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}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* General Styles */
body, html {
min-height: 100%;
background: #fafafa;
font-weight:300;
font-family: Open Sans;
line-height: 1.6;
color: #404040;
}
.row {
max-width:900px;
margin: 0 auto;
}
/* Top Menu */
header {
background: #fff;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
padding:22px 0;
position:fixed;
top:0px;
width:100%;
visibility: hidden;
}
header:after {
content: "";
display: table;
clear: both;
}
header #logo {
float:left;
}
header nav {
float:right;
}
header nav li {
display:inline-block;
margin-right:22px;
}
header nav li:last-of-type {
margin-right:0px;
}
header a {
color: #888;
text-decoration:none;
}
header a:hover {
color: #000;
}
/* Content Section */
/* Welcome Section */
#welcome {
display:flex;
align-items: center;
}
#welcome #google-cloud{
visibility: hidden;
}
#welcome #text {
margin-left: 66px;
overflow: hidden;
visibility: hidden;
}
#welcome h1 {
font-weight: 600;
font-size: 30px;
}
#welcome p {
font-size:30px;
}
</style>
</head>
<body>
<header><div class='row'>
<svg xmlns="http://www.w3.org/2000/svg" width="82" height="16"><path d="M34.92 2.55a6.78 6.78 0 0 0-2.14-1.45 6.53 6.53 0 0 0-2.6-.53 6.73 6.73 0 0 0-2.46.43 6.8 6.8 0 0 0-2.11 1.31l-1.08-1.23a.62.62 0 0 0-.46-.21.61.61 0 0 0-.61.62v13.9A.62.62 0 0 0 24 16h2.62a.62.62 0 0 0 .61-.62v-8a2.84 2.84 0 0 1 .23-1.12 2.88 2.88 0 0 1 .62-.92 2.91 2.91 0 0 1 2.07-.85 2.78 2.78 0 0 1 1.11.23 2.91 2.91 0 0 1 1.53 1.55A2.87 2.87 0 0 1 33 7.35v8a.62.62 0 0 0 .62.62h2.62a.62.62 0 0 0 .61-.62v-8a6.68 6.68 0 0 0-.53-2.64 6.9 6.9 0 0 0-1.4-2.16zM64.62.89H54.31a.62.62 0 0 0-.61.62v2.61a.61.61 0 0 0 .61.62H55a.62.62 0 0 1 .62.62v3.87a6.66 6.66 0 0 0 .53 2.63 6.86 6.86 0 0 0 3.6 3.61 6.5 6.5 0 0 0 2.62.53h2.3a.62.62 0 0 0 .61-.62v-2.61a.62.62 0 0 0-.61-.62h-2.3a2.87 2.87 0 0 1-1.14-.23 3 3 0 0 1-.93-.63 2.9 2.9 0 0 1-.62-.93 2.86 2.86 0 0 1-.22-1.14V5.35a.62.62 0 0 1 .54-.62h4.61a.62.62 0 0 0 .61-.62v-2.6a.62.62 0 0 0-.6-.62zM81.39.61a.61.61 0 0 0-.47.22L80 1.92a.61.61 0 0 1-.87.08 9.12 9.12 0 0 0-.69-.54 8.63 8.63 0 0 0-1.3-.77 7.59 7.59 0 0 0-1.39-.51A5.9 5.9 0 0 0 74.29 0a7.69 7.69 0 0 0-3 .59 7.46 7.46 0 0 0-2.45 1.65 7.8 7.8 0 0 0-1.66 2.54A8.49 8.49 0 0 0 66.59 8a8.89 8.89 0 0 0 .6 3.38 7.36 7.36 0 0 0 1.66 2.51 7.1 7.1 0 0 0 2.45 1.56 8.29 8.29 0 0 0 3 .54 5.75 5.75 0 0 0 1.44-.19 7.88 7.88 0 0 0 1.39-.5 8.49 8.49 0 0 0 1.29-.75c.23-.16.45-.33.67-.5a.61.61 0 0 1 .88.12l.92 1.28A.61.61 0 0 0 82 15.1V1.23a.62.62 0 0 0-.61-.62zm-3.57 8.94a4.43 4.43 0 0 1-.82 1.31 4.12 4.12 0 0 1-1.22.92 3.34 3.34 0 0 1-1.49.34 4.11 4.11 0 0 1-1.49-.27 3.34 3.34 0 0 1-1.21-.79 3.7 3.7 0 0 1-.81-1.29A4.87 4.87 0 0 1 70.49 8a4.88 4.88 0 0 1 .3-1.76A3.76 3.76 0 0 1 71.6 5a3.37 3.37 0 0 1 1.21-.79 4.12 4.12 0 0 1 1.49-.27 3.32 3.32 0 0 1 1.49.34 4 4 0 0 1 1.21.88 4.43 4.43 0 0 1 .82 1.31 4.08 4.08 0 0 1 0 3.07zM3.26.86H.62a.62.62 0 0 0-.62.62v13.9a.62.62 0 0 0 .62.62h2.64a.62.62 0 0 0 .61-.62V1.48a.61.61 0 0 0-.61-.62zm10.83 1a.62.62 0 0 0-.47-1h-3a.61.61 0 0 0-.47.22L4.22 8a.61.61 0 0 0 0 .81l6 6.94a.61.61 0 0 0 .47.22h3a.62.62 0 0 0 .47-1L8.79 8.85a.62.62 0 0 1 0-.81zm5.77-1a.61.61 0 0 0-.47.21l-.12.14-2.5 2.86a.61.61 0 0 0-.15.4v10.91a.61.61 0 0 0 .61.62h2.62a.62.62 0 0 0 .61-.62V1.48a.62.62 0 0 0-.61-.62zM51.3 7.95A4.72 4.72 0 0 0 49.78 7a5.22 5.22 0 0 0-1.86-.33h-4a.91.91 0 0 1-.68-.29A1 1 0 0 1 43 5.7a1 1 0 0 1 1-1h7.18a.62.62 0 0 0 .61-.62V1.51a.62.62 0 0 0-.61-.62h-7.27a4.72 4.72 0 0 0-1.91.38 4.75 4.75 0 0 0-2.5 2.54 4.7 4.7 0 0 0-.37 1.88 4.7 4.7 0 0 0 .38 1.88A4.84 4.84 0 0 0 42 10.15a4.64 4.64 0 0 0 1.87.38H48a.82.82 0 0 1 .83.74.81.81 0 0 1-.81.89h-8.29a.61.61 0 0 0-.61.62v2.61a.61.61 0 0 0 .61.62h8.18a4.75 4.75 0 0 0 3.38-1.41 5 5 0 0 0 1-1.53 4.66 4.66 0 0 0 .38-1.87 4.32 4.32 0 0 0-.38-1.82 4.44 4.44 0 0 0-.99-1.43z" fill="#5333ed" data-name="figures and interactions"/></svg>
<nav id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">My Kinsta</a></li>
<li><a href="#">Knowledgebase</a></li>
</ul>
</nav>
</div></header>
<div id='content'><div class='row'>
<div id='welcome'>
<div id='google-cloud'><svg height="200px" viewBox="0 0 158 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Group 3</title>
<desc>Created with Sketch.</desc>
<defs>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0687556612 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-1" transform="translate(-179.000000, -191.000000)">
<g id="Group-3" transform="translate(170.000000, 191.000000)">
<path d="M59.1519944,21.3057965 L30.5011973,62.5620001 L59.3300845,118.161898 L123.852293,120.260799 L147.190791,67.2241348 L124.676141,17.2049116 L59.1519944,21.3057965 Z M88.9582057,90.3554398 C100.421933,90.3554398 109.71512,81.071028 109.71512,69.6181257 C109.71512,58.1652234 100.421933,48.8808117 88.9582057,48.8808117 C77.4944782,48.8808117 68.201291,58.1652234 68.201291,69.6181257 C68.201291,81.071028 77.4944782,90.3554398 88.9582057,90.3554398 Z" id="Combined-Shape" fill="#EFEFEF" filter="url(#filter-1)"></path>
<path d="M0.486164197,98.3957855 C0.486164197,98.3957855 20.6732427,62.3917304 22.4346902,59.7049849 C24.1961378,57.0182393 29.3403895,55.4985041 29.3403895,55.4985041 C29.3403895,55.4985041 93.6674638,55.0009732 100.046526,55.4985041 C106.425588,55.996035 108.922076,61.4198347 108.922076,61.4198347 L121.22188,83.6420017 L40.7142694,83.6420017 L16.5452623,126.040042 L0.486164197,98.3957855 Z" id="Path-43" fill="#FFCF36" transform="translate(60.854022, 90.658710) scale(-1, -1) rotate(-300.000000) translate(-60.854022, -90.658710) "></path>
<path d="M59.7916346,90.9896019 C59.7916346,90.9896019 79.9787131,54.9855468 81.7401607,52.2988013 C83.5016082,49.6120557 88.6458599,48.0923205 88.6458599,48.0923205 C88.6458599,48.0923205 152.972934,47.5947896 159.351996,48.0923205 C165.731058,48.5898514 168.227546,54.0136511 168.227546,54.0136511 L180.52735,76.2358181 L100.01974,76.2358181 L75.8507328,118.633858 L59.7916346,90.9896019 Z" id="Path-43" fill="#DE4737" transform="translate(120.159493, 83.252527) rotate(-240.000000) translate(-120.159493, -83.252527) "></path>
<path d="M23.7221882,43.1184062 C23.7221882,43.1184062 43.9092667,7.11435114 45.6707142,4.42760561 C47.4321618,1.74086008 52.5764135,0.22112484 52.5764135,0.22112484 C52.5764135,0.22112484 116.903488,-0.276406051 123.28255,0.221124842 C129.661612,0.718655735 132.1581,6.14245541 132.1581,6.14245541 L144.457904,28.3646225 L63.9502934,28.3646225 L40.463025,69.4105501 L23.7221882,43.1184062 Z" id="Path-43" fill="#4A8AF8"></path>
</g>
</g>
</g>
</svg></div>
<div id='text'>
<h1>Welcome to Google Cloud</h1>
<p>Your Kinsta hosted website is now running on the world's largest network.</p>
</div>
</div>
</div></div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script type='text/javascript'>
function calc_left_for_centering( element ) {
var width = element.outerWidth();
var windowWidth = $(window).width();
var requiredOffset = ( windowWidth - width ) / 2;
return requiredOffset;
}
function logoAnimation() {
gcloud.e.fadeIn( 1000, function() {
gcloud.e.animate({
left: gcloud.left + 'px'
}, 700 );
});
}
function textAnimation() {
$('#text').fadeIn(1000)
}
function headerAnimation() {
$('header').animate({
top: 0
})
}
var gcloud = {
e : $('#google-cloud'),
left: $('#google-cloud').offset().left,
};
var text = {
e : $('#text'),
left: gcloud.left + gcloud.e.width(),
width: $('#text').width(),
top: $('#text').offset().top
}
var header = {
e: $('header'),
height: $('header').outerHeight()
}
var windowHeight = $(window).height();
var topOffset = ( windowHeight - gcloud.e.height() ) / 2;
gcloud.e.hide();
gcloud.e.css({
'position' : 'absolute',
'left' : calc_left_for_centering( gcloud.e ),
'visibility' : 'visible',
'top' : topOffset
});
text.e.hide();
text.e.css({
'position' : 'absolute',
'visibility' : 'visible',
'left' : text.left,
'width' : text.width,
'top' : text.top + topOffset
});
header.e.css({
'visibility' : 'visible',
'top' : '-' + header.height + 'px'
})
logo = setTimeout(logoAnimation, 400);
text = setTimeout(textAnimation, 2300);
header = setTimeout(headerAnimation, 4000);
</script>
</body>
</html>