|
|
<html> |
|
|
|
|
|
<head> |
|
|
<title> |
|
|
Google |
|
|
</title> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" /> |
|
|
<style> |
|
|
body { |
|
|
margin: 0; |
|
|
font-family: Arial, sans-serif; |
|
|
background-color: #ffffff; |
|
|
color: #202124; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.header { |
|
|
display: flex; |
|
|
justify-content: flex-end; |
|
|
padding: 10px 20px; |
|
|
} |
|
|
|
|
|
.header a { |
|
|
margin-left: 15px; |
|
|
color: #5f6368; |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
margin-top: 100px; |
|
|
} |
|
|
|
|
|
.search-bar { |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.search-bar input[type="text"] { |
|
|
width: 500px; |
|
|
height: 44px; |
|
|
padding: 0 15px; |
|
|
border: 1px solid #dfe1e5; |
|
|
border-radius: 24px; |
|
|
font-size: 16px; |
|
|
} |
|
|
|
|
|
.search-bar input[type="text"]:focus { |
|
|
outline: none; |
|
|
box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); |
|
|
border-color: rgba(223, 225, 229, 0); |
|
|
} |
|
|
|
|
|
.search-bar .buttons { |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.search-bar .buttons input { |
|
|
background-color: #f8f9fa; |
|
|
border: 1px solid #f8f9fa; |
|
|
border-radius: 4px; |
|
|
color: #3c4043; |
|
|
font-size: 14px; |
|
|
margin: 11px 4px; |
|
|
padding: 0 16px; |
|
|
line-height: 27px; |
|
|
height: 36px; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.search-bar .buttons input:hover { |
|
|
border: 1px solid #dadce0; |
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); |
|
|
color: #202124; |
|
|
} |
|
|
|
|
|
.footer { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
width: 100%; |
|
|
background-color: #f2f2f2; |
|
|
padding: 15px 0; |
|
|
font-size: 14px; |
|
|
color: #70757a; |
|
|
} |
|
|
|
|
|
.footer a { |
|
|
color: #70757a; |
|
|
text-decoration: none; |
|
|
margin: 0 15px; |
|
|
} |
|
|
|
|
|
.footer a:hover { |
|
|
text-decoration: underline; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<div class="header"> |
|
|
<a href="#"> |
|
|
Gmail |
|
|
</a> |
|
|
<a href="#"> |
|
|
Images |
|
|
</a> |
|
|
<i class="fas fa-th"> |
|
|
</i> |
|
|
<img alt="User profile image" height="30" |
|
|
src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-qHvAwasSl7ckNxotJHsrZlqY/user-GhnzchW8QBYQeN5nXbHW9TAW/img-M22MT4Njh6LjX3WZXOstgSry.png?st=2024-09-09T07%3A00%3A08Z&se=2024-09-09T09%3A00%3A08Z&sp=r&sv=2024-08-04&sr=b&rscd=inline&rsct=image/png&skoid=d505667d-d6c1-4a0a-bac7-5c84a87759f8&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2024-09-08T22%3A30%3A58Z&ske=2024-09-09T22%3A30%3A58Z&sks=b&skv=2024-08-04&sig=4ZG7FAJqSFlepyn87fidiUgPfUvR0ZUSyz5GreCaQaQ%3D" |
|
|
style="border-radius: 50%; margin-left: 15px;" width="30" /> |
|
|
</div> |
|
|
<div class="logo"> |
|
|
<img alt="Google Doodle image" height="92" |
|
|
src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-qHvAwasSl7ckNxotJHsrZlqY/user-GhnzchW8QBYQeN5nXbHW9TAW/img-UQQyOCc4PWXjrOcEEsIsfnYl.png?st=2024-09-09T07%3A00%3A09Z&se=2024-09-09T09%3A00%3A09Z&sp=r&sv=2024-08-04&sr=b&rscd=inline&rsct=image/png&skoid=d505667d-d6c1-4a0a-bac7-5c84a87759f8&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2024-09-08T21%3A32%3A42Z&ske=2024-09-09T21%3A32%3A42Z&sks=b&skv=2024-08-04&sig=Mq8Y%2By8kKB4snB96KEX9nlDXEMGoG5Lv3lpMMBrhzpg%3D" |
|
|
width="272" /> |
|
|
</div> |
|
|
<div class="search-bar"> |
|
|
<input placeholder="Search Google or type a URL" type="text" /> |
|
|
<div class="buttons"> |
|
|
<input type="button" value="Google Search" /> |
|
|
<input type="button" value="I'm Feeling Lucky" /> |
|
|
</div> |
|
|
<div style="margin-top: 20px;"> |
|
|
Google offered in: |
|
|
<a href="#"> |
|
|
繁體中文 |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="footer"> |
|
|
<div> |
|
|
Taiwan |
|
|
</div> |
|
|
<div> |
|
|
<a href="#"> |
|
|
About |
|
|
</a> |
|
|
<a href="#"> |
|
|
Advertising |
|
|
</a> |
|
|
<a href="#"> |
|
|
Business |
|
|
</a> |
|
|
<a href="#"> |
|
|
How Search works |
|
|
</a> |
|
|
</div> |
|
|
<div> |
|
|
<a href="#"> |
|
|
Privacy |
|
|
</a> |
|
|
<a href="#"> |
|
|
Terms |
|
|
</a> |
|
|
<a href="#"> |
|
|
Settings |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
|
|
|
</html> |
