forked from Wixel/Chameleon
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
42 lines (41 loc) · 6.11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!doctype html>
<html>
<head>
<title>Chameleon | By Wixel</title>
<link rel="stylesheet" href="dist/chameleon.css" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
/*styles just for demo*/
*{padding:0; margin:0;}
body{font-family: 'Raleway', sans-serif; line-height: 2.4em;}
p{padding: 5% 20%; text-align: justify;}
a{color: #4A90E2; text-decoration: none; text-transform: uppercase; padding: 3px 5px; transition: border-bottom 0.25s ease;}
a:hover{background-color: rgba(34, 34, 34, 0.1); border-bottom: 2.8em solid; z-index: 2; position: relative; border-radius: 2px;}
header, footer{text-align: center;background-color: #efeff0;padding: 2% 0;}
.logo{color: #4A90E2;text-transform: uppercase;letter-spacing: 1.4em;letter-spacing: 1.4vw;animation: hue-rotate 2s linear infinite; font-size: 3em; font-size: 10vw; line-height: 0.9em;}
@keyframes hue-rotate {
from {
-webkit-filter: hue-rotate(0);
-moz-filter: hue-rotate(0);
-ms-filter: hue-rotate(0);
filter: hue-rotate(0);
}
to {
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-ms-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
main{ background: #F4F4F5; color: rgba(34, 34, 34, 0.2);}
/*---end---*/
</style>
</head>
<body>
<header><h1 class="logo">Chameleon</h1></header>
<main>
<p>Lorem <a href="http://adobe.com">adobe</a> dolor sit amet, consectetur <a href="http://aim.com/hkhku/">AIM</a> elit, set <a href="http://about.me/bob">about.me</a> eiusmod tempor incidunt <a href="http://amazon.com/item/789/">amazon</a> labore et dolore magna aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend <a href="http://aol.com/eihfiue/efheio/">AOL</a> incididunt ut labore et dolore magna <a href="http://behance.com">behance</a> aliqua. Ut enim ad minim veniam, quis <a href="http://example.blogger.com">blogger</a> nostrud exercitation <a href="http://carbonmade.com/example/">carbonmade</a> ullamco laboris nisi ut aliquip <a href="http://delicio.us">delicious</a> ex ea commodo consequat. Duis aute <a href="http://designmoo.com">designmoo</a> irure dolor in reprehenderit in voluptate <a href="http://deviantart.com/example/example">deviantart</a> velit esse molestaie cillum. Tia non ob ea <a href="http://disqus/709754354354/">disqus</a> soluad incommod quae egen <a href="http://dribbble.com/explore/p=89/">dribbble</a> ium improb fugiend. Officia deserunt mollit anim <a href="http://dropbox.com/example/7897894/image.jpg">dropbox</a> id est laborum Et harumd dereud facilis <a href="http://m.ebay.com/electronics/tv/32-lcd/">ebay</a> est er expedit distinct. Nam liber te conscient <a href="http://engadget.com/2012/07/12/example/">engadget</a> to factor tum poen legum odioque civiuda et tam. <a href="http://tutorials.envato.com/example/">envato</a> Neque pecun modut est neque nonor et imper <a href="http://etsy.com">etsy</a> ned libidig met, consectetur adipiscing elit <a href="http://evernote.com/download/">evernote</a>, sed ut labore et dolore magna <a href="http://facebook.com/example/254245/79070987/">facebook</a> aliquam is nostrud exercitation ullam mmodo <a href="http://flickr.com/image/example.jpg">flickr</a> consequet. Duis aute in voluptate <a href="http://forrst.com/">forrst</a> velit esse cillum dolore eu fugiat <a href="http://foursquare.com">foursquare</a> nulla pariatur. At vver eos et accusam dignissum qui <a href="http://example.github.com/project/">github</a> blandit est praesent. Trenz pruca beynocguon doas nog <a href="http://google.com/">google</a> apoply su trenz ucu hugh rasoluguon monugor <a href="http://grooveshark.com/">grooveshark</a> or trenz ucugwo jag scannar. Wa hava <a href="http://imdb.com/actors/example">IMDB</a> laasad trenzsa gwo producgs su IdfoBraid, yop quiel <a href="http://instagr.am/udygfiusdy/3252">instagram</a> geg ba solaly rasponsubla rof <a href="http://kickstarter.com/startups/example">kickstarter</a> trenzur sala ent dusgrubuguon. Offoctivo <a href="http://last.fm">last.fm</a> immoriatoly, hawrgasi pwicos asi sirucor. Thas <a href="http://linkedin.com/example">linkedin</a> sirutciun applios tyu thuso itoms ghuso <a href="http://meetup.com">meetup</a> pwicos gosi sirucor in mixent gosi <a href="http://path.com/325235/">path</a> sirucor ic mixent ples cak ontisi sowios uf Zerm hawr <a href="https://paypal.com/example">paypal</a> rwivos. Unte af phen neige pheings atoot <a href="http://pinterest.com/pins/70974098/">pinterest</a> Prexs eis phat eit sakem eit vory gast <a href="http://rss.example.com/news">RSS feed</a> te Plok peish ba useing phen roxas. Eslo <a href="http://skype.com/example/">skype</a> idaffacgad gef trenz beynocguon <a href="http://soundcloud.com/example/example/">soundcloud</a> quiel ba trenz Spraadshaag ent <a href="http://spotify.com">spotify</a> trenz dreek wirc procassidt program. Pwico vux <a href="http://stumbleupon.com/example/57234095/">StumbleUpon</a> bolug incluros all uf cak sirucor hawrgasi itoms alung gith cakiw <a href="http://technorati.com/2012/example">technorati</a> nog pwicos. Plloaso mako nuto uf cakso dodtos anr koop <a href="http://thenextweb.com/apple/2012/09/21/iphone5">The next web</a> cupy uf cak vux noaw yerw phuno. Whag schengos, <a href="http://example.tumblr.com/">tumblr</a> uf efed, quiel ba mada su otrenzr <a href="http://twitter.com/example">twitter</a> swipontgwook proudgs hus yag su ba dagarmidad. <a href="http://vimeo.com/436436/">vimeo</a> Plasa maku noga wipont trenzsa <a href="http://example.wordpress.com/">wordpress(.com)</a> schengos ent kaap zux copy wipont trenz <a href="http://yahoo.com/">yahoo</a> kipg naar mixent phona. Cak pwico <a href="http://yelp.com/375092387509/">yelp</a> siructiun ruos nust apoply tyu cak sisulutiun <a href="http://youtube.com/example/957982375/">youtube</a> munityuw uw cak jot scannow. Plasa maku noga wipont <a href="http://zerp.ly/example/">zerply</a> trenzsa schengos ent kaap zux copy wipont trenz kipg naar mixent phona.</p>
</main>
<footer><a href="https://github.com/Wixel/Chameleon">github</a> ~ <a href="https://wixelhq.com">WixelHQ</a></footer>
</body>
</html>