<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="static/css/main.css">
<noscript><link rel="stylesheet" href="static/css/noscript.css"></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="logo">
<span class="icon fa-gem"></span>
</div>
<div class="content">
<div class="inner">
<h1>Dimension</h1>
<p>A fully responsive site template designed by <a href="#">HTML5 UP</a> and released<br>
for free under the <a href="#">Creative Commons</a> license.</p>
</div>
</div>
<nav>
<ul>
<li><a href="#intro">Intro</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<!--<li><a href="#elements">Elements</a></li>-->
</ul>
</nav>
</header>
<!-- Main -->
<div id="main">
<!-- Intro -->
<article id="intro">
<h2 class="major">Intro</h2>
<span class="image main"><img src="static/picture/pic01.jpg" alt=""></span>
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. By the way, check out my <a href="#work">awesome work</a>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.</p>
</article>
<!-- Work -->
<article id="work">
<h2 class="major">Work</h2>
<span class="image main"><img src="static/picture/pic02.jpg" alt=""></span>
<p>Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices.</p>
<p>Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet feugiat tempus.</p>
</article>
<!-- About -->
<article id="about">
<h2 class="major">About</h2>
<span class="image main"><img src="static/picture/pic03.jpg" alt=""></span>
<p>Lorem ipsum dolor sit amet, consectetur et adipiscing elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices. Aliquam libero et malesuada fames ac ante ipsum primis in faucibus. Cras viverra ligula sit amet ex mollis mattis lorem ipsum dolor sit amet.</p>
</article>
<!-- Contact -->
<article id="contact">
<h2 class="major">Contact</h2>
<form method="post" action="#">
<div class="fields">
<div class="field half">
<label for="name">Name</label>
<input type="text" name="name" id="name">
</div>
<div class="field half">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="4"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary"></li>
<li><input type="reset" value="Reset"></li>
</ul>
</form>
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
</ul>
</article>
<!-- Elements -->
<article id="elements">
<h2 class="major">Elements</h2>
<section>
<h3 class="major">Text</h3>
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
<hr>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<hr>
<h4>Blockquote</h4>
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
<h4>Preformatted</h4>
<pre><code>i = 0;
while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}
print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
</section>
<section>
<h3 class="major">Lists</h3>
<h4>Unordered</h4>
<ul>
<li>Dolor pulvinar etiam.</li>
<li>Sagittis adipiscing.</li>
<li>Felis enim feugiat.</li>
</ul>
<h4>Alternate</h4>
<ul class="alt">
<li>Dolor pulvinar etiam.</li>
<li>Sagittis adipiscing.</li>
<li>Felis enim feugiat.</li>
</ul>
<h4>Ordered</h4>
<ol>
<li>Dolor pulvinar etiam.</li>
<li>Etiam vel felis viverra.</li>
<li>Felis enim feugiat.</li>
<li>Dolor pulvinar etiam.</li>
<li>Etiam vel felis lorem.</li>
<li>Felis enim et feugiat.</li>
</ol>
<h4>Icons</h4>
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
</ul>
<h4>Actions</h4>
<ul class="actions">
<li><a href="#" class="button primary">Default</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
<ul class="actions stacked">
<li><a href="#" class="button primary">Default</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
</section>
<section>
<h3 class="major">Table</h3>
<h4>Default</h4>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
透明效果html5全屏响应式个人主页模板
版权申诉
65 浏览量
2022-07-14
01:40:08
上传
评论
收藏 1.05MB RAR 举报
Zp_demo.demohuo.top_98.rar （53个子文件） 
Zp_demo.demohuo.top_98 
index.html 13KB static css 
fontawesome-all.min.css 55KB noscript.css 572B css.css 8KB main.css 35KB image 
overlay.png 4KB
bg.jpg 85KB picture pic03.jpg 9KB pic01.jpg 10KB pic02.jpg 9KB js jquery.min.js 86KB util.js 12KB browser.min.js 2KB main.js 8KB breakpoints.min.js 2KB font 6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmRduz8A.woff2 11KB fa-solid-900.woff2 74KB fa-brands-400.woff2 73KB 6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmRduz8A.woff2 11KB 6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZY4lCdo18Smxg.woff2 892B 6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZMkido18Smxg.woff2 916B fa-brands-400.woff 85KB 6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZY4lCdv18Smxg.woff2 1KB fa-brands-400.eot 126KB 6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmhduz8A.woff2 5KB 6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdu.woff2 13KB 6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlBduz8A.woff2 7KB 6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZY4lCdi18Smxg.woff2 12KB 6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwkxduz8A.woff2 7KB 6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZMkidv18Smxg.woff2 1KB fa-regular-400.woff2 13KB fa-solid-900.eot 188KB fa-regular-400.ttf 33KB 6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwkxduz8A.woff2 7KB 6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZMkids18Q.woff2 12KB 6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZY4lCdh18Smxg.woff2 1KB 6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZMkidh18Smxg.woff2 1KB fa-regular-400.eot 34KB 6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmxduz8A.woff2 6KB 6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmhduz8A.woff2 5KB 6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmBduz8A.woff2 4KB 6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZY4lCdj18Smxg.woff2 4KB 6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlBduz8A.woff2 7KB 6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmxduz8A.woff2 6KB 6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZY4lCds18Q.woff2 12KB fa-solid-900.ttf 187KB 6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZMkidi18Smxg.woff2 12KB fa-brands-400.ttf 126KB 6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZMkidj18Smxg.woff2 4KB 6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmBduz8A.woff2 4KB 6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdu.woff2 13KB fa-regular-400.woff 16KB fa-solid-900.woff 96KB资源评论
