| <html> | |
| <head> | |
| <title>Google</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| <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 src="https://placehold.co/30x30" alt="User profile image" style="border-radius: 50%; margin-left: | |
| 15px;"> | |
| </div> | |
| <div class="logo"> <img src="https://placehold.co/272x92" alt="Google Doodle image"> </div> | |
| <div class="search-bar"> <input type="text" placeholder="Search Google or type a URL"> | |
| <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="#">u7e41u9ad4u4e2du6587</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> |