Quote:
Originally Posted by wishingwell
Hi I am doing TOP as well. Not very advanced so I am not really sure what all your code is doing/trying to do. Mine is much simpler.
<!DOCTYPE html>
<html>
<head>
<title>Google clone</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
On another note, does anyone have some tips for learning jquery? I don't like either codeschool or codecademy which TOP recommends.
Quote:
Originally Posted by Anais
ran thru TOP's rebuild google project, here's all what i did. it's not perfect by any means, but it looks fairly similar (didn't bother with turning the bottom rows into links, the theory is the same as the top)
stylesheet in the same folder as the html file of course
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css">
<title>Google</title>
</head>
<body>
<nav>
<ul>
<li><a href="https://plus.google.com/">+You</a></li>
<li><a href="https://mail.google.com/">Gmail</a></li>
<li><a href="https://images.google.com/">Images</a></li>
<li>Your Email</li>
</ul>
</nav>
<div><img src="https://www.google.com/images/srpr/logo11w.png"></div>
<form>
<input type="text" name="search" size="50">
</form>
<br>
<div id="b1">
Google Search
</div>
<div id="b2">
I'm Feeling Lucky
</div>
<footer>
<ul style="float:left;">
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
<ul style="float:right; padding-right: 25px;">
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
</ul>
</footer>
</body>
</html>
Code:
/* * {
border: 1px solid black;
} */
body {
font-family: sans-serif;
font-size: .8em;
}
li {
list-style-type: none;
display: inline;
padding: 5px;
}
nav {
position: auto;
margin-left: 75%;
text-alight: center;
}
a{
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
}
img {
height: 25%;
width: 25%;
position: relative;
left: 35%;
padding-top: 160px;
}
form {
margin-left: 33%;
width: 50%;
padding-top: 20px;
}
footer {
clear: both;
position: fixed;
bottom: 0px;
background-color: #e3e3e3;
width: 100%;
padding-left: 5px;
margin-left: -10px;
height: 30px;
}
footer ul {
display: inline;
}
#b1, #b2 {
border: 1px solid black;
background-color: #e3e3e3;
border-radius: 3px;
height: 15px;
padding: 2px
}
#b1:hover, #b2:hover{
box-shadow: 0 0 2px #000000;
}
#b1 {
margin: auto;
margin-left: 40%;
float: left;
width: 90px;
}
#b2 {
margin: auto;
margin-left: 50%;
width: 110px;
}
Very reminded of how much i hate html/css
Haha, I just finished my HTML but the CSS is not being responsive at all, so I really haven't been able to start it.
Long code here, apologies in advance;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="normalize.css">
<link type="text/css" rel="stylesheet" href="googlestyle.css">
<Title>Google</title>
</head>
<body>
<div id="container">
<div id="headbar">
<ul id="header">
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">+You</a></li>
<li><a href="https://mail.google.com/mail/?tab=wm">Gmail</a></li>
<li><a href="https://www.google.ca/imghp?hl=e&tab=wi&ei=ahAjVd2VKYutyASqh4GADg&ved=0C BIQqi4oAg">Images</a></li>
<li><a href="http://www.google.ca/intl/en/options/">Apps</a></li>
<li><a href="https://accounts.google.com/ServiceLogin?hl=en&continue="><button type="button">Sign In</button></a></li>
</ul>
</div>
<div id="logo">
<img src="https://www.google.ca/images/srpr/logo11w.png">
</div>
<div id="searchbar">
<form>
<input type="text" id="search" name="search_box" action="http://www.google.ca">
</form>
</div>
<div id="buttons">
<button type="button">Google Search</button>
<button type="button">I'm Feeling Lucky</button>
</div>
<div id="french">
<p> Google.ca offered in: <a href="https://www.google.ca/setprefs?sig=0_zbQT8WTA_CwCB92jvNS4cwSGINE%3D&hl=f r&source=homepage">Français</a></p>
</div>
</div id="footer">
<ul id="leftfoot">
<li><a href="https://www.google.ca/intl/en/ads/?fg=1">Advertising</a></li>
<li><a href="https://www.google.ca/services/?fg=1">Business</a></li>
<li><a href="https://www.google.ca/intl/en/about.html?fg=1">About</a></li>
</ul>
<ul id="rightfoot">
<li><a href="https://www.google.ca/intl/en/policies/privacy/?fg=1">Privacy</a></li>
<li><a href="https://www.google.ca/intl/en/policies/terms/?fg=1">Terms</a></li>
<li><a href="https://www.google.ca/preferences?hl=en">Settings</a></li>
</ul>
</div>
</div>
</body>
</html>