HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Artem Korolenko + Graphic designer</title> <meta name="author" content="Artem Korolenko" /> <meta name="revised" content="24/01/2011" /> <meta name="description" content="Artem Korolenko is a web and graphic designer." /> <meta name="keywords" content="Web design, Graphic design, GUI, Icon, Customization, HTML, CSS, XHTML, HTML5, CSS3, Web, Artem, Korolenko, Clubberry" /> <link rel="stylesheet" type="text/css" href="inc/style.css" /> <script type="text/javascript" src="inc/script.js"></script> </head> <body> <script type="text/javascript"> var bgPath = 'img/'; var imagesNumber = 2; var rndBg = Math.floor(Math.random() * imagesNumber); document.body.style.backgroundImage = 'url(' + bgPath + rndBg + '.jpg)'; </script> <div class="floating"> I'm just another mr. «designer» from Ukraine<br /> I have a strong opinion in web and graphic design<br /> You can check my works on <a href="http://dribbble.com/Clubberry" target="_blank" class="dribbble links">dribbble</a> and <a href="http://clubberry.deviantart.com/" target="_blank" class="deviantart links">deviantart</a> <br /> Also follow me on <a href="http://twitter.com/#!/Clubb3rry" target="_blank" class="twitter links">twitter</a> or just <a href="mailto:artkorolenko@russia.ru?Subject=Hello!" class="hello links">say hello</a><br /> </div> <div class="icons"> <a href="http://cargocollective.com/artkorolenko" target="_blank"><img class="icon" alt="Cargo" src="img/icons/bw/cargo_16.png" /></a> <a href="http://clubberry.deviantart.com/" target="_blank"><img class="icon" alt="deviantART" src="img/icons/bw/deviantart_16.png" id="deviantart" width="16" height="16" onmouseover="mouseOver1()" onmouseout="mouseOut1()" /></a> <a href="http://dribbble.com/Clubberry" target="_blank"><img class="icon" alt="Dribbble" src="img/icons/bw/dribbble_16.png" id="dribbble" width="16" height="16" onmouseover="mouseOver2()" onmouseout="mouseOut2()" /></a> <a href="http://www.facebook.com/iksdejkee" target="_blank"><img class="icon" alt="Facebook" src="img/icons/bw/facebook_16.png" id="facebook" width="16" height="16" onmouseover="mouseOver3()" onmouseout="mouseOut3()" /></a> <a href="http://www.flickr.com/photos/iksde/" target="_blank"><img class="icon" alt="Flickr" src="img/icons/bw/flickr_16.png" id="flickr" width="16" height="16" onmouseover="mouseOver4()" onmouseout="mouseOut4()" /></a> <a href="http://www.lastfm.ru/user/WebScUm" target="_blank"><img class="icon" alt="Last.fm" src="img/icons/bw/lastfm_16.png" id="lastfm" width="16" height="16" onmouseover="mouseOver5()" onmouseout="mouseOut5()" /></a> <a href="skype:man.hunt-"><img class="icon" alt="Skype" src="img/icons/bw/skype_16.png" id="skype" width="16" height="16" onmouseover="mouseOver6()" onmouseout="mouseOut6()" /></a> <a href="http://iksde.tumblr.com/" target="_blank"><img class="icon" alt="Tumblr" src="img/icons/bw/tumblr_16.png" id="tumblr" width="16" height="16" onmouseover="mouseOver7()" onmouseout="mouseOut7()" /></a> <a href="http://twitter.com/#!/Clubb3rry" target="_blank"><img class="icon" alt="Twitter" src="img/icons/bw/twitter_16.png" id="twitter" width="16" height="16" onmouseover="mouseOver8()" onmouseout="mouseOut8()" /></a> <a href="http://vimeo.com/clubberry" target="_blank"><img class="icon" alt="Vimeo" src="img/icons/bw/vimeo_16.png" id="vimeo" width="16" height="16" onmouseover="mouseOver9()" onmouseout="mouseOut9()" /></a> <a href="mailto:artkorolenko@russia.ru?Subject=Hello!" target="_blank"><img class="icon" alt="Email" src="img/icons/bw/email_16.png" /></a> </div> </body> </html> CSS body { background-color: #E6E6E6; font-family: "Trebuchet MS", Georgia, Times New Roman, serif; font-style: italic; font-size: 12px; color: #353535; } img { border:none; } a { text-decoration: none; } a.links { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } a.dribbble { color: #ea4c89; background: #ffffff; border-radius: 5px; -moz-border-radius: 5px; padding: 1px; margin: -3px; } a.dribbble:hover { color: #ffffff; background: #353535; border-radius: 5px; -moz-border-radius: 5px; padding: 1px; margin: -3px; } a.deviantart { color: #425349; background: #ffffff; border-radius: 5px; -moz-border-radius: 5px; padding: 1px; margin: -3px; } a.deviantart:hover { color: #ffffff; background: #353535; border-radius: 5px; -moz-border-radius: 5px; padding: 1px; margin: -3px; } a.twitter { color: #46d1ff; background: #ffffff; border-radius: 5px; -moz-border-radius: 5px; padding: 1px; margin: -3px; } a.twitter:hover { color: #ffffff; background: #353535; border-radius: 5px; -moz-border-radius: 5px; padding: 1px; margin: -3px; } a.hello { color: #000000; background: #ffffff; border-radius: 5px; -moz-border-radius: 5px; padding: 1px; margin: -3px; } a.hello:hover { color: #ffffff; background: #353535; border-radius: 5px; -moz-border-radius: 5px; padding: 1px; margin: -3px; } .icon { opacity: 0.25; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */ filter: alpha(opacity = 25); /* IE 5-7 hack */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .icon:hover { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 hack */ filter: alpha(opacity = 100); /* IE 5-7 hack */ } .floating { position: absolute; bottom: 40%; left: 50%; margin-left: -150px; width: 300px; line-height: 18pt; } .icons { position: absolute; bottom: 37.5%; left: 50%; margin-left: -150px; width: 300px; }
