Skip to content

Instantly share code, notes, and snippets.

@abdurraufahmad

abdurraufahmad/google-redesign.markdown

Created August 31, 2019 14:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abdurraufahmad/01e88641ad15ed0b24af343e79c3ed86 to your computer and use it in GitHub Desktop.
Save abdurraufahmad/01e88641ad15ed0b24af343e79c3ed86 to your computer and use it in GitHub Desktop.
Download ZIP
Google Redesign
Raw
index.html
<!-- nav -->
<nav>
<ul>
<li><a href="#">+Me</a></li>
<li class="hover"><a href="#">Search</a></li>
<li><a href="#">Pictures</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="#">Calender</a></li>
<li><a href="#">More</a></li>
</ul>
</nav>
<!-- /nav -->
<!-- profile -->
<section class="profile-cover">
<div class="profile">
<div class="prf-image"><img src="https://dl.dropboxusercontent.com/s/yroktkzam52wctn/avatar.png" alt="avatar"/></div>
<h3>Mohamad Reza Deylami</h3>
<h4>UI Designer</h4>
<ul>
<li id="count"><a href="#">8</a></li>
<li id="share"><a href="#">Share</a></li>
</ul>
<div class="detail-cover">
<div class="arrow-up"></div>
<div class="arrow-up2"></div>
<div class="detail">
<div class="detail-image"><img src="https://dl.dropboxusercontent.com/s/9jx4i7c3h4cirnf/big-avatar.png" alt="big-avatar"/></div>
<h3>Mohamad Reza Deylami</h3>
<h4>mohamad.partizan@gmail.com</h4>
<a href="#"><i class="fa fa-power-off log-out"></i></a>
<ul class="profile-button">
<li id="view-profile"><a href="#">View Profile</a></li>
<li id="setting"><a href="#"><i class="fa fa-cog"></i></a></li>
</ul>
<p><a href="#">Add Account</a> - <a href="#">Privacy</a></p>
</div>
</div>
</div>
</section>
<!-- /profile -->
<!-- main -->
<section class="main">
<div id="logo"><img src="https://dl.dropboxusercontent.com/s/7p5v6r0wll5n2yg/logo.png" alt="logo"/></div>
<ul>
<li><a href="#"><i class="fa fa-globe fa-lg web"></i>Web</a></li>
<li class="hover-nav"><a href="#"><i class="fa fa-picture-o fa-lg images"></i>Images</a></li>
<li><a href="#"><i class="fa fa-video-camera fa-lg videos"></i>Videos</a></li>
<li><a href="#"><i class="fa fa-credit-card fa-lg news"></i>News</a></li>
</ul>
<!-- search field -->
<form action="process.php" method="post">
<input type="text" name="search" id="search">
<a href="#"><i class="fa fa-microphone fa-2x voice"></i></a>
<input type="submit" name="btn-search" id="btn-search" value="Google Search">
</form>
<!-- /search field -->
<div class="copyright">
<p><a href="https://google.com" title="Google">Google</a> Redesign</p>
<p>Design By <a href="https://goo.gl/q5GeAN" title="Reza Mahmoudi">Reza Mahmoudi</a></p>
<p>Created by <a href="http://imohamad.me" title="MohamadReza Deylami" target="_blank">Mohamad Reza Deylami.</a></p>
</div>
</section>
<!-- /main -->
Raw
script.js
/**
* Created by MohamadReza Deylami <hello@imohamad.me>
* @mr_deylami
*
**/
$(document).ready(function(){$(".prf-image").click(function() {$(".detail-cover").toggle();});});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
/*-- reset --*/
/* `XHTML, HTML4, HTML5 Reset
----------------------------------------------------------------------------------------------------*/
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
border: 0;
margin: 0;
padding: 0;
font-size: 100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
/*
Override the default (display: inline) for
browsers that do not recognize HTML5 tags.
IE8 (and lower) requires a shiv:
http://ejohn.org/blog/html5-shiv
*/
display: block;
}
b,
strong {
/*
Makes browsers agree.
IE + Opera = font-weight: bold.
Gecko + WebKit = font-weight: bolder.
*/
font-weight: bold;
}
img {
color: transparent;
font-size: 0;
vertical-align: middle;
/*
For IE.
https://css-tricks.com/ie-fix-bicubic-scaling-for-images
*/
-ms-interpolation-mode: bicubic;
}
ol,
ul {
list-style: none;
}
li {
/*
For IE6 + IE7:
"display: list-item" keeps bullets from
disappearing if hasLayout is triggered.
*/
display: list-item;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th,
td,
caption {
font-weight: normal;
vertical-align: top;
text-align: left;
}
q {
quotes: none;
}
q:before,
q:after {
content: "";
content: none;
}
sub,
sup,
small {
font-size: 75%;
}
sub,
sup {
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
svg {
/*
For IE9. Without, occasionally draws shapes
outside the boundaries of <svg> rectangle.
*/
overflow: hidden;
}
a{
color:#92918f;
text-decoration:none;
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/*-- end reset --*/
/*-- main style --*/
body{
font-size:13px;
background-color:#f9f9f9;
font-family: 'Open Sans', sans-serif;
background-image:url(../images/bg.png);
background-repeat:repeat;
}
h1,h2,h3,h4,h5{
font-weight:normal;
font-style:normal;
}
nav{
min-width: 920px;
}
nav ul{
margin-left: 20px;
margin-top: 20px;
}
nav ul li{
display: inline;
margin-right: 40px;
}
nav ul li a:hover{
color: #1c1c1c;
}
.hover a{
color: #1c1c1c;
}
.profile-cover{
border: solid 1px transparent;
height: 240px;
margin-top: 10px;
}
.profile{
width: 400px;
height: 220px;
margin-left: 20px;
margin-top: 30px;
}
.prf-image{
width: 58px;
height: 58px;
cursor: pointer;
}
.profile > h3{
color: #da4a38;
margin-top: -60px;
margin-left: 63px;
}
.profile > h4{
color: #898989;
font-size: 12px;
margin-left: 63px;
}
.profile ul{
margin-left: 63px;
margin-top: 9px;
}
.profile ul li{
display: inline;
margin-right: 5px;
}
#count a{
color: #FFF;
background-color: #da4a38;
padding: 3px 15px 3px 15px;
-moz-border-radius: 2px;/*Firefox*/
-webkit-border-radius: 2px;/*Safari, Chrome*/
border-radius: 2px;
border: solid 1px #c13828;
}
#count a:hover, #share a:hover, #view-profile a:hover, #setting a:hover {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
#share a{
color: #494949;
background-color: #e5e5e5;
padding: 3px 15px 3px 15px;
-moz-border-radius: 2px;/*Firefox*/
-webkit-border-radius: 2px;/*Safari, Chrome*/
border-radius: 2px;
border: solid 1px #cecece;
}
.detail{
border: solid 1px #cdcdcd;
width: 377px;
height: 127px;
background-color: #FFF;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color=#e2e1e1)";/*IE 8*/
-moz-box-shadow: 0px -1px 3px #e2e1e1;/*FF 3.5+*/
-webkit-box-shadow: 0px -1px 3px #e2e1e1;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
box-shadow: 0px -1px 3px #e2e1e1;/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color=#e2e1e1); /*IE 5.5-7*/
}
.arrow-up {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
position: absolute;
margin-top: 1px;
margin-left: 20px;
}
.arrow-up2 {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #cdcdcd;
margin-left: 20px;
margin-top: 13px;
}
.detail-image{
margin: 10px;
width: 107px;
height: 107px;
}
.detail > h3{
color: #373737;
margin-top: -120px;
margin-left: 130px;
}
.detail > h4{
color: #898989;
font-size: 11.4px;
margin-top: 3px;
margin-left: 130px;
}
.log-out{
float: right;
margin-top: -34px;
margin-right: 10px;
background-color: #2b2b2b;
border: solid 1px #3d3d3d
-moz-border-radius: 2px;/*Firefox*/
-webkit-border-radius: 2px;/*Safari, Chrome*/
border-radius: 2px;
color: #FFF;
padding: 5px 7px 5px 7px;
}
.detail > ul{
margin-left: 130px;
margin-top: 25px;
}
#view-profile a{
color: #fff;
background-color: #4b8efb;
padding: 3px 15px 3px 15px;
-moz-border-radius: 2px;/*Firefox*/
-webkit-border-radius: 2px;/*Safari, Chrome*/
border-radius: 2px;
border: solid 1px #3079ed;
}
#view-profile a:active {
background: -moz-linear-gradient(center top , #3C7AE4, #3F76D3) repeat scroll 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15) inset;
}
#setting a{
color: #494949;
background-color: #e5e5e5;
padding: 3px 6px 3px 6px;
-moz-border-radius: 2px;/*Firefox*/
-webkit-border-radius: 2px;/*Safari, Chrome*/
border-radius: 2px;
border: solid 1px #cecece;
}
.detail > p{
margin-left: 130px;
margin-top: 14px;
}
.detail > p a {
color: #515050;
}
.detail > p a:hover {
color: #1c1c1c;;
}
.main{
width: 580px;
height: auto;
margin: -45px auto;
}
#logo{
margin: auto;
width: 213px;
height: 69px;
}
.main ul{
text-align: center;
width: 526px;
margin: 50px auto;
}
.main ul li{
display: inline;
margin-left: 25px;
margin-right: 25px;
}
.main ul li a{
color: #959595;
}
.main ul li a:hover{
color: #1f1f1f;
}
.hover-nav a{
color: #1f1f1f;
}
.web, .images, .videos, .news{
margin-top: -20px;
padding-bottom: 20px;
position: absolute;
}
.web{
margin-left: 6px;
}
.images, .videos{
margin-left: 12px;
}
.news{
margin-left: 8px;
}
.main form{
border: solid 1px #cdcdcd;
width: 526px;
height: 40px;
margin: -30px auto;
padding-bottom: 1px;
-moz-border-radius: 1px;/*Firefox*/
-webkit-border-radius: 1px;/*Safari, Chrome*/
border-radius: 1px;
}
#search{
height: 37px;
width: 372px;
border: none;
color: #444444;
font-size: 17px;
padding-left: 5px;
padding-right: 5px;
font-weight: normal;
}
.voice{
color: #959595;
position: absolute;
margin-top: 8px;
margin-left: 1px;
}
.voice:hover{
color: #646464;
}
#btn-search{
background-color: #da4a38;
border: solid 1px #c13828;
-moz-border-radius: 2px;/*Firefox*/
-webkit-border-radius: 2px;/*Safari, Chrome*/
border-radius: 2px;
color: #FFF;
height: 37px;
width: 108px;
cursor: pointer;
margin-left: 30px;
}
#btn-search:focus{
padding: 0;
}
/*-- copyright --*/
.copyright{
width: 526px;
margin: 120px auto;
text-align: center;
color: #92918f;
}
.copyright a:hover{
color: #1c1c1c;
}
.copyright p{
margin-bottom: 8px;
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment