-
Notifications
You must be signed in to change notification settings - Fork 0
/
idex.html
58 lines (57 loc) · 2.32 KB
/
idex.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>StarBucks</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<section>
<div class="circle"></div>
<header>
<a href="#" class="logo"><img src="./img/logo.png" alt="logo" /></a>
<div class="toggle" onclick="toggleMenu()"></div>
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">What's New</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div class="content">
<div class="textBox">
<h2>It's not just Coffee<br />It's <span>StarBucks</span></h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore
est repellat fugiat? Impedit qui explicabo, id perferendis voluptate
odit eum culpa dignissimos nisi nostrum aliquid labore molestias
nesciunt aut officia saepe iusto beatae? Necessitatibus tempore
delectus iusto cum ducimus qui, optio perferendis, aut corporis
commodi, molestias neque quo ex?
</p>
<a href="#">Learn More</a>
</div>
<div class="imgBox">
<img src="./img/img1.png" alt="img" class="starbucks">
</div>
</div>
<ul class="thumb">
<li><img src="./img/thumb1.png" alt="img" onclick="onChange('./img/img1.png','#017143')"></li>
<li><img src="./img/thumb2.png" alt="img" onclick="onChange('./img/img2.png','#eb7495')"></li>
<li><img src="./img/thumb3.png" alt="img" onclick="onChange('./img/img3.png','#d752b1')"></li>
</ul>
<ul class="sci">
<li><a href="#"><img src="./img/facebook.png" alt="img"></a></li>
<li><a href="#"><img src="./img/twitter.png" alt="img"></a></li>
<li><a href="#"><img src="./img/instagram.png" alt="img"></a></li>
</ul>
</section>
<script src="./js/main.js"></script>
</body>
</html>