Skip to content

Commit 8fac985

Browse files
azmaeenmahatab28azmaeenmahatab28
committed
google-homepage
1 parent 2665163 commit 8fac985

7 files changed

+207
-0
lines changed

‎bars.png

952 Bytes
Loading

‎google (logo).jpg

46.9 KB
Loading

‎google.png

5.83 KB
Loading

‎index.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Google</title>
9+
<link rel="icon" href="google (logo).jpg">
10+
</head>
11+
<body>
12+
<section>
13+
<header>
14+
<ul>
15+
<li><a href="http://gmail.com">Gmail</a></li>
16+
<li><a href="https://www.google.com/imghp?hl=en&ogbl">Images</a></li>
17+
<li><a href="#"><img src="bars.png"></a></li>
18+
<li><button><a style="color: white;" href="https://accounts.google.com/AddSession?hl=en&continue=https://www.google.com/&ec=GAlAmgQ&authuser=0">Sign In</a></button></li>
19+
</ul>
20+
</header>
21+
<div class="main">
22+
<img src="google.png" alt="Google">
23+
<div class="searchbox">
24+
<input type="text" class="search">
25+
<div class="icons">
26+
<div><img src="search.png"></div>
27+
<div><img src="mic.png"></div>
28+
</div>
29+
</div>
30+
<div class="buttons">
31+
<button><a href="https://www.google.com/">Google Search</a></button>
32+
<button>I'm Felling Lucky</button>
33+
</div>
34+
<div class="lang">
35+
Google Offered in <a href="#">বাংলা</a>
36+
</div>
37+
</div>
38+
<div class="footer">
39+
<div class="row">
40+
<ul>
41+
<li><a href="#">Advertising</a></li>
42+
<li><a href="#">Business</a></li>
43+
<li><a href="https://about.google/?utm_source=google-BD&utm_medium=referral&utm_campaign=hp-footer&fg=1">About</a></li>
44+
<li><a href="#">How Search Works</a></li>
45+
</ul>
46+
<ul>
47+
<li><a href="#">Privacy</a></li>
48+
<li><a href="#">Terms</a></li>
49+
<li><a href="#">Settings</a></li>
50+
</ul>
51+
</div>
52+
</div>
53+
</section>
54+
</body>
55+
</html>

‎mic.png

1.59 KB
Loading

‎search.png

1.09 KB
Loading

‎style.css

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
body{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: Arial, Helvetica, sans-serif;
6+
}
7+
section{
8+
position: relative;
9+
width: 100%;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
min-height: 100vh;
14+
}
15+
section header{
16+
position: absolute;
17+
top: 0;
18+
width: 100%;
19+
display: flex;
20+
justify-content: flex-end;
21+
margin-right: 40px;
22+
}
23+
section header ul{
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
}
28+
section header ul li{
29+
list-style: none;
30+
margin-left: 20px;
31+
}
32+
section header ul li a{
33+
color: #111;
34+
text-decoration: none;
35+
font-size: 13px;
36+
}
37+
section header ul li button{
38+
background: #4584ef;
39+
border: none;
40+
outline: none;
41+
padding: 8px 14px;
42+
color: #fff;
43+
font-size: 14px;
44+
font-weight: bold;
45+
border-radius: 3px;
46+
cursor: pointer;
47+
}
48+
section .main{
49+
width: 680px;
50+
display: flex;
51+
flex-direction: column;
52+
justify-content: center;
53+
align-items: center;
54+
}
55+
section .main .searchbox{
56+
position: relative;
57+
width: 100%;
58+
margin-top: 20px;
59+
}
60+
section .main .searchbox .search{
61+
width: 98%;
62+
padding: 13px;
63+
padding-left: 60px;
64+
border-radius: 30px;
65+
border: 1px solid #ccc;
66+
outline: none;
67+
font-size: 16px;
68+
}
69+
section .main .searchbox .icons{
70+
position: absolute;
71+
top: 0;
72+
width: 100%;
73+
display: flex;
74+
padding: 12px 30px;
75+
justify-content: space-between;
76+
align-items: center;
77+
pointer-events: none;
78+
}
79+
section .main .buttons{
80+
margin-top: 20px;
81+
}
82+
section .main .buttons button{
83+
margin: 0 5px;
84+
padding: 12px 20px;
85+
color: #555;
86+
font-size: 14px;
87+
border: none;
88+
cursor: pointer;
89+
border: 1px solid transparent;
90+
outline: none;
91+
}
92+
section .main .buttons button:hover{
93+
border: 1px solid #ccc;
94+
}
95+
section .main .lang{
96+
margin-top: 20px;
97+
}
98+
section .footer{
99+
position: absolute;
100+
bottom: 0;
101+
left: 0;
102+
width: 100%;
103+
background: #f2f2f2;
104+
}
105+
section .footer .row{
106+
display: flex;
107+
justify-content: space-between;
108+
border-top: 1px solid rgba(0, 0, 0, 0.05);
109+
}
110+
section .footer .row ul{
111+
display: flex;
112+
}
113+
section .footer .row ul li{
114+
list-style: none;
115+
}
116+
section .footer .row ul li a{
117+
text-decoration: none;
118+
font-size: 14px;
119+
color: #5f6368;
120+
margin-right: 25px;
121+
}
122+
123+
124+
/*Desktop*/
125+
@media (min-width:1024px){
126+
127+
}
128+
129+
/*Tablet View*/
130+
@media (min-width:769px) and (max-width:1023px){
131+
section header ul li button{
132+
background-color: tomato;
133+
}
134+
}
135+
136+
137+
138+
/*Mobile View*/
139+
@media (max-width:768px){
140+
section .main .searchbox .search{
141+
width: 78%;
142+
}
143+
section .main .searchbox .icons{
144+
width: 84%;
145+
}
146+
section .footer .row ul{
147+
display: block;
148+
}
149+
section header ul li button{
150+
background-color: blue;
151+
}
152+
}

0 commit comments

Comments
 (0)