xgqfrms/html5-index.html

## html5-index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
    <!-- SEO : Search Engine Optimization  -->
    <meta name="keywords" content="HTML5,Website,xgqfrms,2016,shanghai,github,front-end,front end,learning programming,...">
    <meta name="description" content="HTML5 :This is a web front-end learning webiste for anybody who love web programming!">
    <meta name="author" content="xgqfrms 2016">
    <meta name="generator" content="Sublime Text3 && WAMP || LAMP">
    <!-- 自动刷新 $ 重定向  -->
    <meta http-equiv="refresh" content="60s; url=https://html5.xgqfrms.xyz/index.html">
    <!-- Browser Compatiable -->
    <link href="https://cdn.xgqfrms.xyz/logo/favicon.png" rel="icon" type="image/x-icon">
    <!-- CSS3 Media Query -->
    <!-- jQuery 制作无缝轮播的焦点图 -->
    <!--  -->
    <title>HTML5 | xgqfrms</title>
    <style>
        .bg {
            color: #0f0;
            font-size: 23px;
        }
    </style>
    <style>
    .div {
        height: 400px;
        width: 400px;
        background: #eee;
        margin: auto;
    }

    p {
        width: 60%;
        margin: auto;
        font: 14px/1.5 Helvetica, sans-serif;
    }

    .is-Transformed {
        background-color: rgba(0, 255, 0, 0.7);
        width: 50%;
        margin: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    </style>
</head>

<body>
    <div class="div">
        <h1>xgqfrms : HTML5 : web front-end learning webiste !</h1>
        <p>
            &nbsp;&nbsp;This is a web front-end learning webiste for anybody who love web programming!
        </p>
        <a href=" https://html5.xgqfrms.xyz"> https://html5.xgqfrms.xyz/</a>
        <div id="google_translate_element"></div>
    </div>
    <a href=" https://html5.xgqfrms.xyz/Canvas/safety-canvas.html">Canvas/safety-canvas.html</a>
    <hr>
    <h1><mark>coming soon ...</mark></h1>
    <!-- https://github.com/blog/273-github-ribbons https://github.com/logos-->
    <a href="https://html5.xgqfrms.xyz">
        <img style="position: absolute; top: 0; left: 0; border: 0;" src="https://html5.xgqfrms.xyz/images/githubribbons/forkme_left_orange_ff7600.png" alt="Fork me on GitHub" data-canonical-src="https://html5.xgqfrms.xyz/images/githubribbons/forkme_left_orange_ff7600.png">
    </a>
    <div>
        <!-- linkedin -->
        <script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
        <div class="LI-profile-badge" data-version="v1" data-size="medium" data-locale="zh_CN" data-type="vertical" data-theme="dark" data-vanity="凌晨-夏-16521b124"><a class="LI-simple-link" href='https://cn.linkedin.com/in/%E5%87%8C%E6%99%A8-%E5%A4%8F-16521b124?trk=profile-badge'>夏凌晨</a></div>
    </div>
    <!-- 网站翻译器 - Google 翻译 -->
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'en',
                gaTrack: true,
                gaId: 'UA-80900288-1'
            }, 'google_translate_element');
        }
    </script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    <!-- 网站翻译器 - Google 翻译 -->
    <!-- Google Tag Manager -->
    <noscript>
        <iframe src="//www.googletagmanager.com/ns.html?id=GTM-KD5KNC" height="0" width="0" style="display:none;visibility:hidden"></iframe>
    </noscript>
    <script>
        (function(w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime(),
                event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                '//www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-KD5KNC');
    </script>
    <!-- End Google Tag Manager -->
    <!-- google-analytics -->
    <script>
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
        ga('create', 'UA-89270518-1', 'auto');
        ga('send', 'pageview');
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
	<!-- SEO : Search Engine Optimization -->
	<meta name="keywords" content="HTML5,Website,xgqfrms,2016,shanghai,github,front-end,front end,learning programming,...">
	<meta name="description" content="HTML5 :This is a web front-end learning webiste for anybody who love web programming!">
	<meta name="author" content="xgqfrms 2016">
	<meta name="generator" content="Sublime Text3 && WAMP \|\| LAMP">
	<!-- 自动刷新 $ 重定向 -->
	<meta http-equiv="refresh" content="60s; url=https://html5.xgqfrms.xyz/index.html">
	<!-- Browser Compatiable -->
	<link href="https://cdn.xgqfrms.xyz/logo/favicon.png" rel="icon" type="image/x-icon">
	<!-- CSS3 Media Query -->
	<!-- jQuery 制作无缝轮播的焦点图 -->
	<!-- -->
	<title>HTML5 \| xgqfrms</title>
	<style>
	.bg {
	color: #0f0;
	font-size: 23px;
	}
	</style>
	<style>
	.div {
	height: 400px;
	width: 400px;
	background: #eee;
	margin: auto;
	}

	p {
	width: 60%;
	margin: auto;
	font: 14px/1.5 Helvetica, sans-serif;
	}

	.is-Transformed {
	background-color: rgba(0, 255, 0, 0.7);
	width: 50%;
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	}
	</style>
	</head>

	<body>
	<div class="div">
	<h1>xgqfrms : HTML5 : web front-end learning webiste !</h1>
	<p>
	This is a web front-end learning webiste for anybody who love web programming!
	</p>
	<a href=" https://html5.xgqfrms.xyz"> https://html5.xgqfrms.xyz/</a>
	<div id="google_translate_element"></div>
	</div>
	<a href=" https://html5.xgqfrms.xyz/Canvas/safety-canvas.html">Canvas/safety-canvas.html</a>
	<hr>
	<h1><mark>coming soon ...</mark></h1>
	<!-- https://github.com/blog/273-github-ribbons https://github.com/logos-->
	<a href="https://html5.xgqfrms.xyz">
	<img style="position: absolute; top: 0; left: 0; border: 0;" src="https://html5.xgqfrms.xyz/images/githubribbons/forkme_left_orange_ff7600.png" alt="Fork me on GitHub" data-canonical-src="https://html5.xgqfrms.xyz/images/githubribbons/forkme_left_orange_ff7600.png">
	</a>
	<div>
	<!-- linkedin -->
	<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
	<div class="LI-profile-badge" data-version="v1" data-size="medium" data-locale="zh_CN" data-type="vertical" data-theme="dark" data-vanity="凌晨-夏-16521b124"><a class="LI-simple-link" href='https://cn.linkedin.com/in/%E5%87%8C%E6%99%A8-%E5%A4%8F-16521b124?trk=profile-badge'>夏凌晨</a></div>
	</div>
	<!-- 网站翻译器 - Google 翻译 -->
	<script type="text/javascript">
	function googleTranslateElementInit() {
	new google.translate.TranslateElement({
	pageLanguage: 'en',
	gaTrack: true,
	gaId: 'UA-80900288-1'
	}, 'google_translate_element');
	}
	</script>
	<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
	<!-- 网站翻译器 - Google 翻译 -->
	<!-- Google Tag Manager -->
	<noscript>
	<iframe src="//www.googletagmanager.com/ns.html?id=GTM-KD5KNC" height="0" width="0" style="display:none;visibility:hidden"></iframe>
	</noscript>
	<script>
	(function(w, d, s, l, i) {
	w[l] = w[l] \|\| [];
	w[l].push({
	'gtm.start': new Date().getTime(),
	event: 'gtm.js'
	});
	var f = d.getElementsByTagName(s)[0],
	j = d.createElement(s),
	dl = l != 'dataLayer' ? '&l=' + l : '';
	j.async = true;
	j.src =
	'//www.googletagmanager.com/gtm.js?id=' + i + dl;
	f.parentNode.insertBefore(j, f);
	})(window, document, 'script', 'dataLayer', 'GTM-KD5KNC');
	</script>
	<!-- End Google Tag Manager -->
	<!-- google-analytics -->
	<script>
	(function(i, s, o, g, r, a, m) {
	i['GoogleAnalyticsObject'] = r;
	i[r] = i[r] \|\| function() {
	(i[r].q = i[r].q \|\| []).push(arguments)
	}, i[r].l = 1 * new Date();
	a = s.createElement(o),
	m = s.getElementsByTagName(o)[0];
	a.async = 1;
	a.src = g;
	m.parentNode.insertBefore(a, m)
	})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
	ga('create', 'UA-89270518-1', 'auto');
	ga('send', 'pageview');
	</script>
	</body>
	</html>