Created
April 9, 2013 04:19
-
-
Save williamli/5342936 to your computer and use it in GitHub Desktop.
A CodePen by Marcello Africano. Google Minimal Redesign - A redesigned Google home page based off of the original.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class='menu'> | |
<ul> | |
<li><a href="#">+You</a></li> | |
<li><a href="#" class='active'>Search</a></li> | |
<li><a href="#">Maps</a></li> | |
<li><a href="#">Play</a></li> | |
<li><a href="#">Youtube</a></li> | |
<li><a href="#">News</a></li> | |
<li><a href="#">Gmail</a></li> | |
<li><a href="#">Drive</a></li> | |
<li><a href="#">Calendar</a></li> | |
</ul> | |
</div> | |
<img class='profile' src='http://en.gravatar.com/userimage/36246017/6992f359ba766881f03bdeafb204f94e.jpg?size=96'/> | |
<h1 class='logo'>Google</h1> | |
<div class='search'> | |
<input type="text" /> | |
<button><i class='icon-search'></i></button> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($){ | |
function injector(t, splitter, klass, after) { | |
var a = t.text().split(splitter), inject = ''; | |
if (a.length) { | |
$(a).each(function(i, item) { | |
inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after; | |
}); | |
t.empty().append(inject); | |
} | |
} | |
var methods = { | |
init : function() { | |
return this.each(function() { | |
injector($(this), '', 'char', ''); | |
}); | |
}, | |
words : function() { | |
return this.each(function() { | |
injector($(this), ' ', 'word', ' '); | |
}); | |
}, | |
lines : function() { | |
return this.each(function() { | |
var r = "eefec303079ad17405c889e092e105b0"; | |
injector($(this).children("br").replaceWith(r).end(), r, 'line', ''); | |
}); | |
} | |
}; | |
$.fn.lettering = function( method ) { | |
if ( method && methods[method] ) { | |
return methods[ method ].apply( this, [].slice.call( arguments, 1 )); | |
} else if ( method === 'letters' || ! method ) { | |
return methods.init.apply( this, [].slice.call( arguments, 0 ) ); | |
} | |
$.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); | |
return this; | |
}; | |
})(jQuery); | |
$(document).ready(function() { | |
$("h1.logo").lettering(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@font-face { | |
font-family: 'Poiret One'; | |
font-style: normal; | |
font-weight: 400; | |
src: local('Poiret One'), local('PoiretOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/poiretone/v1/HrI4ZJpJ3Fh0wa5ofYMK8RsxEYwM7FgeyaSgU71cLG0.woff) format('woff'); | |
} | |
@font-face { | |
font-family: 'Open Sans Light'; | |
font-style: normal; | |
font-weight: 300; | |
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff'); | |
} | |
@font-face { | |
font-family: 'Open Sans'; | |
font-style: normal; | |
font-weight: 400; | |
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); | |
} | |
html{ | |
width:100%; | |
height:100%; | |
} | |
body{ | |
font-family:'Open Sans', sans; | |
background:#f1f1f1; | |
background: -webkit-radial-gradient(center 0px, cover, white 0%,#ededed 100%); | |
background: -moz-radial-gradient(center 0px, cover, white 0%,#ededed 100%); | |
background: -o-radial-gradient(center 0px, cover, white 0%,#ededed 100%); | |
} | |
.menu{ | |
height:40px; | |
border-bottom:1px solid #e5e5e5; | |
} | |
.menu ul li{ | |
float:left; | |
padding:15px 15px; | |
} | |
.menu ul li a{ | |
color:#afafaf; | |
font-size:11px; | |
text-decoration:none; | |
border-bottom: 2px solid rgba(.; | |
transition: color .3s ease; | |
} | |
.menu ul li a:hover{ | |
color:#222; | |
} | |
.menu ul li a.active{ | |
color: #777; | |
font-weight:bold; | |
cursor: default; | |
} | |
h1.logo{ | |
font-size:80px; | |
font-family:'Poiret One',sans; | |
text-align:center; | |
margin-top:100px; | |
color:#666; | |
text-shadow:0px 1px 2px rgba(0,0,0,0.3); | |
} | |
h1.logo span:nth-of-type(1){ | |
color:#0089ab; | |
} | |
h1.logo span:nth-of-type(2){ | |
color:#d91821; | |
} | |
h1.logo span:nth-of-type(3){ | |
color:#ffac05; | |
} | |
h1.logo span:nth-of-type(4){ | |
color:#0089ab; | |
} | |
h1.logo span:nth-of-type(5){ | |
color:#88c406; | |
} | |
h1.logo span:nth-of-type(6){ | |
color:#d91821; | |
} | |
img.profile{ | |
position: absolute; | |
top: 20px; | |
right: 30px; | |
padding: 5px; | |
background: white; | |
box-shadow: 0px 0px 0px 7px #F3F3F3; | |
border: 1px solid #CCC; | |
} | |
.search{ | |
width:400px; | |
margin:0px auto; | |
margin-top:40px; | |
} | |
.search input[type="text"]{ | |
border:1px solid #e5e5e5; | |
font-size:20px; | |
width:400px; | |
display:block; | |
padding:10px 5px; | |
font-family: 'Open Sans Light', sans; | |
color:#333; | |
outline:0; | |
box-shadow:0px 1px 0px #fff; | |
} | |
.search input[type="text"]:focus{ | |
border:1px solid #539fb5; | |
} | |
.search button{ | |
position: absolute; | |
margin-top: -49px; | |
font-size: 25px; | |
background: #fff; | |
border: none; | |
margin-left: 366px; | |
color: #CFCFCF; | |
height: 45px; | |
width: 45px; | |
cursor: pointer; | |
} | |
.search input[type="text"]:focus ~ button{ | |
color:#777; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment