Create directory of hyperlinks.
Create a working page to iterate on in future. The domain host will hold my domain for 2 years based on the credit I have with the domain host people. It's time to start using the domain, and I wanted a quick place to show visitors.master
parent
32c43c85c2
commit
af219ff341
Binary file not shown.
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
Before Width: | Height: | Size: 7.1 KiB |
26
index.html
26
index.html
|
@ -3,23 +3,29 @@
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>I am pheng.</title>
|
<title>Pheng Heong TAN's web-site</title>
|
||||||
<link rel="stylesheet" href="style.css" type="text/css">
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="container">
|
<p>
|
||||||
<div id="splash">
|
First name: Pheng Heong<br />
|
||||||
|
Surname: Tan<br />
|
||||||
<img id="before" src="images/splash.png"></img>
|
People call me: PH
|
||||||
<img id="after" src="images/coming-soon.png"></img>
|
</p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="http://twitter.com/tanphengheong">Twitter</a></li>
|
||||||
|
<li><a href="http://phtan.github.io/blog">Blog</a></li>
|
||||||
|
<li><a href="http://github.com/phtan">Github</a></li>
|
||||||
|
<li><a href="http://linkedin.com/in/phengheong">LinkedIn</a></li>
|
||||||
|
<li>Email: phtan90 [at] gmail [dot] com</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
46
style.css
46
style.css
|
@ -1,46 +0,0 @@
|
||||||
body {
|
|
||||||
position: relative;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background: #f55;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container {
|
|
||||||
height: 320px;
|
|
||||||
/*background: #555;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#splash img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#splash {
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
width: 40%;
|
|
||||||
|
|
||||||
margin: 0 0 0 30%;
|
|
||||||
top: 50%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#before {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
#after {
|
|
||||||
position: absolute;
|
|
||||||
z-index: -1;
|
|
||||||
top: 0px;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#splash:hover #before {
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#splash:hover #after {
|
|
||||||
z-index: 1;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue