- Joined
- Jun 17, 2015
- Posts
- 318
- Ratings
I'm just curious to see if anyone knows any coding of some sort 
I know
[DOUBLEPOST=1464647218][/DOUBLEPOST]
I know
- HTML
- CSS
- SCSS
- Javascript
- PHP
- jQuery
- mySQL
- Bootstrap
[DOUBLEPOST=1464647218][/DOUBLEPOST]
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Google</title>
<link rel = "icon" type = "image/png" href = "Google.png"/>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body>
<div class = "viewport">
<div class = "head">
<a href = "#">Gmail</a>
<a href = "#">Images</a>
<a href = "#" class = "apps"><i class="material-icons" style = "margin-top:-7px;">apps</i></a>
<a href = "#" class = "sign_in">Sign In</a>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class = "main">
<div class = "logo">
<center>
<img src = "Logo.png" height = "100px" width = "280px"/>
<p class = "canada">Canada</p>
</center>
</div>
<br/>
<br/>
<form>
<div class = "search">
<center>
<input type="text" id = "search">
</center>
</div>
</form>
<br/>
<br/>
<form>
<div class = "submit">
<center>
<input type = "submit" value = "Google Search" class = "GoogleSearch">
<input type = "submit" value = "I'm Feeling Lucky" class = "FeelingLucky">
</center>
</div>
</form>
<br/>
<br/>
<div class = "french">
<center>
<p class = "message">Google.ca offered in: <a href = "#">Français</a></p>
</center>
</div>
<script>
document.getElementById("search").focus();
</script>
</div>
<div class="footer">
<div class = "wrap">
<a href = "#">Advertising</a>
<a href = "#">Business</a>
<a href = "#">About</a>
<div class = "pushright">
<a href = "#">Privacy</a>
<a href = "#">Terms</a>
<a href = "#">Settings</a>
</div>
</div>
</div>
</div>
</body>
</html>
HTML:
* {
font-family: arial,sans-serif;
margin: 0;
}
html {
height: 100%;
max-height: 100%;
overflow: hidden;
}
body {
width:100%;
height: 100%;
max-height: 100%;
white-space: nowrap;
position: relative;
margin: 0;
/*overflow-y:hidden;
overflow-x: hidden;*/
}
.viewport{
width: 100%;
height: 100%;
/*overflow-y: hidden;
overflow-x: hidden;*/
white-space: nowrap;
position:absolute;
margin: 0 auto;
margin-bottom: -7;
padding-bottom: 0;
max-height: 100%;
}
.head {
float: right;
margin-right: 30px;
margin-top:20px;
}
.apps {
margin-top: 5px;
height: 30px;
width:30px;
background-position: -130px -30px;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
outline: none;
border-radius: 2px;
-webkit-border-radius:2px;
cursor: default;
}
i:hover {
color: black;
}
.sign_in {
background-color: dodgerblue;
color: white;
font-weight: bold;
border-radius: 2px;
-webkit-border-radius: 2px;
background-image :-webkit-linear-gradient(top, rgb(67, 135, 253), rgb(70, 131, 234));
padding: 8px 14px;
text-align: center;
vertical-align: middle;
margin-left: 11px;
margin-bottom: 2px;
}
a {
margin-top: -5px;
text-decoration: none;
padding: 7px 6px;
color: #737373;
font-size: small;
}
a:hover {
text-decoration: underline;
}
.sign_in:hover {
}
.logo {
margin:0 auto;
/*overflow-y: hidden;
overflow-x: hidden;*/
white-space: nowrap;
}
.search {
/*overflow-y: hidden;
overflow-x: hidden;*/
white-space: nowrap;
}
#search {
width:620px ;
height:32px;
padding-left: 6px;
font-size: 20px;
font-weight: thin;
margin: auto;
/*overflow-y: hidden;
overflow-x: hidden;*/
white-space: nowrap;
line-height: 26px !important;
z-index: 6;
cursor: text;
border: 0.5px solid lightgray;
background-image: url("https://lh4.ggpht.com/TB-IHpq4AEau6r8Pn4EhXRkPnSGw7eB8a368JIYPAePcKaQg8kaujtSncUHDXQmJHdA=w300");
background-repeat: no-repeat;
background-size:20px 20px;
background-position: 99%;
}
#search:focus {
font-size: 20px;
font-weight: thin;
color: black;
padding-left: 6px;
/*overflow-y: hidden;
overflow-x: hidden;*/
white-space: nowrap;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #4285f4;
}
.submit {
margin: 0 auto;
/*overflow-y: hidden;
overflow-x: hidden;*/
white-space: nowrap;
}
.GoogleSearch {
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 2px;
color: #757575;
cursor: default;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
width: 127px;
height: 35px;
margin: 0 auto;
/*overflow-y: hidden;
overflow-x: hidden;*/
white-space: nowrap;
}
.FeelingLucky {
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 2px;
color: #757575;
cursor: default;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
width: 140px;
height: 35px;
margin: 0 auto;
/*overflow-y: hidden;
overflow-x: hidden;*/
white-space: nowrap;
}
.GoogleSearch:hover {
background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
color:#222;
background-color: #f8f8f8;
border: 1px solid #c6c6c6;
font-size: 13px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
font-family: arial, sans-serif;
font-weight: bold;
}
.FeelingLucky:hover {
background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
color:#222;
background-color: #f8f8f8;
border: 1px solid #c6c6c6;
font-size: 13px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
font-family: arial, sans-serif;
font-weight: bold;
}
.footer {
position:absolute;
margin-top: -30px;
height: 30px;
clear:both;
background-color: #f2f2f2 ;
border:none;
border-top: 1px solid #e4e4e4;
width: 100%;
white-space: nowrap;
padding-top: 10px;
margin-bottom:0;
padding-bottom: 0;
overflow: hidden;
bottom: 0;
padding-left: 14px;
}
.footer a {
color: #737373;
padding: 20px 13px;
white-space: nowrap;
margin-bottom:0;
padding-bottom: 0;
overflow: hidden;
}
.main {
height: 100%;
white-space: nowrap;
max-height: 100%;
}
.pushright {
float: right;
white-space: nowrap;
padding-right: 34px;
}
.french {
margin: auto;
white-space: nowrap;
margin-top: -15px;
}
.message {
font-size: 13px;
color:#222;
white-space: nowrap;
margin-top: -15px;
}
.french a {
color:#1a0dab;
white-space: nowrap;
}
.french a:visited {
color:#609;
}
.canada {
margin-top: -25px;
margin-left: 220px;
color: #4285f4;
font:16px/16px roboto-regular, arial, sans-serif;
white-space: nowrap;
}
Last edited:
