-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
62 lines (57 loc) · 2.27 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
<!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="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="circle"></div>
<header>
<img src="img/logo.png" class="logo" alt="Logo">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div class="content">
<div class="texbox">
<h2>It's not just a Coffee <br>It's <span>Starbucks</span></h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum alias reprehenderit natus fugiat
delectus ab cumque accusantium facere eveniet! Sit qui eaque doloribus aliquid tempore, commodi vero
quos laudantium voluptate aperiam aut
</p>
<a href="/">Learn More</a>
</div>
<div class="imgbox">
<img src="img/img1.png" class="Starbucks">
</div>
</div>
<ul class="thumb">
<li><img src="img/thumb1.png" onclick="imgSlider('img/img1.png'); changeCircleColor('#017143')"></li>
<li><img src="img/thumb2.png" onclick="imgSlider('img/img2.png'); changeCircleColor('#eb7495')"></li>
<li><img src="img/thumb3.png" onclick="imgSlider('img/img3.png'); changeCircleColor('#d752b1')"></li>
</ul>
<ul class="sei">
<li><a href="/"><img src="img/facebook.png"></a></li>
<li><a href="/"><img src="img/instagram.png"></a></li>
<li><a href="/"><img src="img/twitter.png"></a></li>
</ul>
</section>
<!-- JS -->
<script type="text/javascript">
function imgSlider(anything) {
document.querySelector('.Starbucks').src = anything;
}
function changeCircleColor(color) {
const circle = document.querySelector('.circle');
circle.style.background = color;
}
</script>
</body>
</html>