radanovicnikola93/index.html

## 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>

## 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;
}

## 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>

## 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;
}
	<!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>
	* {-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;
	}
	.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;
	}