Thin Google Homepage

Developer
Haeman
Size
4,760 Kb
Views
32,384
  1. Thin Google Homepage Previews
  2. Thin Google Homepage HTML Codes
  3. Thin Google Homepage CSS Codes
  4. Thin Google Homepage JS Codes

How do I make an thin google homepage?

Original by http://dribbble.com/shots/855155-Google-Search-Page?list=tags&tag=icons under work in progress !. What is a thin google homepage? How do you make a thin google homepage? This script and codes were developed by Haeman on 29 August 2022, Monday.

Thin Google Homepage Previews
IQ Test

Thin Google Homepage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Thin Google Homepage</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @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;
}
.menu ul li a.active{ font-weight:bold;
}
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:#539fb5;
}
h1.logo span:nth-of-type(2){ color:#d7545a;
}
h1.logo span:nth-of-type(3){ color:#edbd5b;
}
h1.logo span:nth-of-type(4){ color:#539fb5;
}
h1.logo span:nth-of-type(5){ color:#b9d088;
}
h1.logo span:nth-of-type(6){ color:#d7545a;
}
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;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='menu'> <ul> <li><a href="#">+Martabak</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://graph.facebook.com/freakout.jq/picture?type=square'/>
<h1 class='logo'>Google</h1>
<div class='search'>
<input type="text" /> <button><i class='icon-search'></i></button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Thin Google Homepage - Script Codes CSS Codes

@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;
}
.menu ul li a.active{ font-weight:bold;
}
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:#539fb5;
}
h1.logo span:nth-of-type(2){ color:#d7545a;
}
h1.logo span:nth-of-type(3){ color:#edbd5b;
}
h1.logo span:nth-of-type(4){ color:#539fb5;
}
h1.logo span:nth-of-type(5){ color:#b9d088;
}
h1.logo span:nth-of-type(6){ color:#d7545a;
}
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;
}

Thin Google Homepage - Script Codes JS Codes

/*global jQuery */
/*!
* Lettering.JS 0.6.1
*
* Copyright 2010, Dave Rupert http://daverupert.com
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
* Thanks to Paul Irish - http://paulirish.com - for the feedback.
*
* Date: Mon Sep 20 17:14:00 2010 -0600
*/
(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";	// Because it's hard to split a <br/> tag consistently across browsers,	// (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash	// (of the word "split"). If you're trying to use this plugin on that	// md5 hash string, it will fail because you're being ridiculous.	injector($(this).children("br").replaceWith(r).end(), r, 'line', '');	});	}	};	$.fn.lettering = function( method ) {	// Method calling logic	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 ) ); // always pass an array	}	$.error( 'Method ' + method + ' does not exist on jQuery.lettering' );	return this;	};
})(jQuery);
$(document).ready(function() { $("h1.logo").lettering(); });
Thin Google Homepage - Script Codes
Thin Google Homepage - Script Codes
Home Page Home
Developer Haeman
Username pedox
Uploaded August 29, 2022
Rating 4
Size 4,760 Kb
Views 32,384
Do you need developer help for Thin Google Homepage?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Haeman (pedox) Script Codes
Name
Martabak Box
Switch Button Single element
Keroppi
Handbook CSS3
Lollipop Loading
The Rainbow
Loading Hourglass
Mac
The Yosemite
Ticketbox
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!