Skip to content

Instantly share code, notes, and snippets.

@radanovicnikola93

radanovicnikola93/index.html

Last active November 30, 2017 08:57
Show Gist options
  • Save radanovicnikola93/d58bbbcf8439128b07425b4da55eb412 to your computer and use it in GitHub Desktop.
Save radanovicnikola93/d58bbbcf8439128b07425b4da55eb412 to your computer and use it in GitHub Desktop.
Download ZIP
Google
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Google">
<meta name="keywords" content="Google, homepage">
<meta name="author" content="Nikola Radanović">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Google</title>
</head>
<body>
<div class="google">
<div class="nav">
<div class="nav-links">
<a href="https://mail.google.com" class="nav-a1">Gmail</a>
<a href="https://images.google.com" class="nav-a2">Images</a>
<a href="#" class="nav-a2">Apps</a>
<a href="sign-in.html" class="nav-a2">Sign In</a>
</div>
</div>
<div class="logo">
<img src="google.png" alt="Google logo">
</div>
<div class="search">
<input class="search-field" type="text">
<div class="buttons">
<input type="button" value="Google search" class="search-button">
<input type="button" value="I'm feeling lucky" class="lucky-button">
</div>
</div>
<div class="simple-text">
<span>Google je na voljo v: <a href="#" class="a1">English</a></span>
</div>
<div id="footer">
<span class="links-left">
<a href="#" class="al1">Advertising</a>
<a href="#" class="al2">Business</a>
<a href="#" class="al3">About</a>
</span>
<span class="links-right">
<a href="#" class="ar1">Privacy</a>
<a href="#" class="ar2">Terms</a>
<a href="#" class="ar3">Settings</a>
</span>
</div>
</div>
</body>
</html>
Raw
sign-in.css
* {-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#sign-in {
width: 100%;
}
.header {
position: relative;
margin: 20px auto 0 auto;
text-align: center;
}
body {
font-family: arial;
font-weight: lighter;
}
.img1 {
width: 120px;
height: 42px;
margin-bottom: 20px;
}
.text1 {
font-size: 40px;
color: black;
margin-bottom: 20px;
}
.text2 {
font-size: 20px;
color: black;
}
#sign-in-box {
position: relative;
margin: 20px auto;
padding-top: 30px;
height: 300px;
width: 350px;
text-align: center;
background-color: rgba(211, 211, 211, 0.5);
opacity: 0.8;
box-shadow: 0px 3px 4px 3px rgba(211,211,211,0.8);
-moz-box-shadow: 0px 3px 4px 3px rgba(211,211,211,0.8);
-webkit-box-shadow: 0px 3px 4px 3px rgba(211,211,211,0.8);
}
.img2 {
margin: 15px auto;
width: 100px;
height: 100px;
}
.username {
margin-bottom: 5px;
background-color: rgba(255,255,0,0.5);
width: 280px;
height: 40px;
font-size: 15px;
}
.button1 {
margin-bottom: 10px;
width: 280px;
height: 40px;
color: white;
background-color: CornflowerBlue;
}
.help-link {
text-decoration: none;
color: blue;
padding-left: 55%;
font-size: 13px;
margin-top: 10px;
}
.create-account {
position: relative;
text-align: center;
margin: 0 auto 25px auto;
}
.aca {
text-decoration: none;
color: blue;
font-size: 13px;
}
.text-and-icons {
position: relative;
margin: 0 auto;
text-align: center;
}
.text3 {
font-size: 14px;
}
.img3 {
width: 250px;
height: 39px;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
height: 40px;
width: 100%;
background-color: rgba(211, 211, 211, 0.5);
padding-top: 15px;
}
.links {
left: 10px;
bottom: 5px;
font-size: 13px;
}
.af1,
.af2,
.af3,
.af4 {
padding: 0 10px;
text-decoration: none;
color: black;
opacity: 0.7;
}
Raw
sign-in.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="sign-in.css" rel="stylesheet "type="text/css">
<title>Sign In</title>
</head>
<body>
<div id="sign-in">
<div class="header">
<img src="google.png" alt="Google Logo" class="img1">
<div class="text1">One account. All of Google.</div>
<div class="text2">Sign in with your Google account</div>
</div>
<div id="sign-in-box">
<div>
<img src="user-logo.png" alt="User logo" class="img2">
</div>
<div>
<input type="text" class="username" placeholder="Enter your email">
</div>
<div>
<input type="button" value="Next" class="button1">
</div>
<div>
<a href="#" class="help-link">Need Help?</a>
</div>
</div>
<div class="create-account">
<a href="#" class="aca">Create account</a>
</div>
<div class="text-and-icons">
<div class="text3">One Google Account for everything Google</div>
<img src="icons.jpeg" alt="Icons" class="img3">
</div>
<div id="footer">
<div class="links">
<a href="#" class="af1">About Google</a>
<a href="#" class="af2">Privacy</a>
<a href="#" class="af3">Terms</a>
<a href="#" class="af4">Help</a>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
.google {
height: 100%;
font-family: arial;
}
a {
text-decoration: none;
color: black;
}
.nav {
display: block;
}
.nav-links {
text-align: right;
padding: 15px;
font-size: 13px;
}
.nav-a1,
.nav-a2,
.nav-a3,
.nav-a4 {
padding: 0 10px;
}
.logo {
margin: 200px auto 10px auto;
position: relative;
text-align: center;
height: 91px;
width: 272px;
}
img {
height: 91px;
width: 272px;
}
.search {
margin: 0 auto;
position: relative;
text-align: center;
align-items: center;
}
.search-button {
width: 125px;
height: 36px;
font-size: 13px;
color: black;
border-radius: 0%;
}
.lucky-button {
width: 125px;
height: 36px;
font-size: 13px;
color: black;
border-radius: 0%;
}
.search-field {
margin: 5px auto;
font-size: 20px;
width: 500px;
height: 30px;
-webkit-box-shadow: 0px 2px 2px 2px rgba(211, 211, 211, 0.9);
-moz-box-shadow: 0px 2px 2px 2px rgba(211, 211, 211, 0.9);
box-shadow: 0px 2px 2px 2px rgba(211, 211, 211, 0.9);
border-top-width: 0;
border-left-width: 0;
}
.buttons {
margin-top: 15px;
}
.simple-text {
text-align: center;
margin-top: 15px;
font-size: 13px;
}
.a1 {
color: blue;
font-size: 13px;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
height: 40px;
width: 100%;
background-color: rgba(211, 211, 211, 0.5);
}
.links-left {
float: left;
padding-top: 12px;
font-size: 13px;
}
.al1,
.al2,
.al3 {
padding: 0 15px;
}
.links-right {
float: right;
padding-top: 12px;
font-family: arial;
font-size: 13px;
}
.ar1,
.ar2,
.ar3 {
padding: 0 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment