File size: 3,235 Bytes
d5d3bd0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<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> |