-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
76 lines (73 loc) · 3.25 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google 클론 코딩</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/all.min.css">
<link rel="stylesheet" href="./style.css">
<script type="module" defer src="./main.js"></script>
</head>
<body>
<header>
<div class="info">
<a href="#">Google 정보</a>
<a href="#">스토어</a>
</div>
<div class="flex-space"></div>
<div class="actions">
<a href="#">Gmail</a>
<a href="#">이미지</a>
<a href="#">
<span class="material-symbols-outlined">
apps
</span>
</a>
<a href="#" class="account-wrapper">
<img src="./images/unnamed.jpg" alt="계정" class="account-image">
<div class="svg-wrapper">
<svg focusable="false" height="40px" version="1.1" viewBox="0 0 40 40" width="40px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="opacity:1.0"><path d="M4.02,28.27C2.73,25.8,2,22.98,2,20c0-2.87,0.68-5.59,1.88-8l-1.72-1.04C0.78,13.67,0,16.75,0,20c0,3.31,0.8,6.43,2.23,9.18L4.02,28.27z" fill="#F6AD01"></path><path d="M32.15,33.27C28.95,36.21,24.68,38,20,38c-6.95,0-12.98-3.95-15.99-9.73l-1.79,0.91C5.55,35.61,12.26,40,20,40c5.2,0,9.93-1.98,13.48-5.23L32.15,33.27z" fill="#249A41"></path><path d="M33.49,34.77C37.49,31.12,40,25.85,40,20c0-5.86-2.52-11.13-6.54-14.79l-1.37,1.46C35.72,9.97,38,14.72,38,20c0,5.25-2.26,9.98-5.85,13.27L33.49,34.77z" fill="#3174F1"></path><path d="M20,2c4.65,0,8.89,1.77,12.09,4.67l1.37-1.46C29.91,1.97,25.19,0,20,0l0,0C12.21,0,5.46,4.46,2.16,10.96L3.88,12C6.83,6.08,12.95,2,20,2" fill="#E92D18"></path></svg>
</div>
</a>
</header>
<main>
<div class="main_image"><img src="./images/googlelogo_light_color.png" alt="구글 메인 로고" class="google-logo"></div>
<div class="search">
<span class="material-symbols-outlined search-icon">
search
</span>
<form action="#">
<input type="text" class="search-input" placeholder="" />
<button type="submit" class="search-btn">검색</button>
</form>
<span class="material-symbols-outlined">keyboard</span>
<span class="material-symbols-outlined">mic</span>
<span class="material-symbols-outlined">photo_camera</span>
</div>
<div class="buttons">
<button>Google 검색</button>
<button>I'm Feeling Lucky</button>
</div>
</main>
<footer>
<div class="first-row">
<span>대한민국</span>
</div>
<div class="second-row">
<div class="left_bar">
<a href="#">광고</a>
<a href="#">비즈니스</a>
<a href="#">검색의 원리</a>
</div>
<div class="right_bar">
<a href="#">개인정보처리방침</a>
<a href="#">약관</a>
<a href="#">설정</a>
</div>
</div>
</footer>
</body>
</html>