kel3spyyo/index.html at main · abygailol2025/kel3spyyo · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SPYY-O</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="logo">
            <img src="asset/Modern Brand Name Initials Typography Logo.png" alt="logo image">
        </div>
        <nav>
            <ul>
                <li><a href="#index">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#shop">Shop</a></li>
                <li><a href="#contact">Contact</a></li>

            </ul>
        </nav>
    </header>

    <div id="hero">
        <a href="#product"><img src="./asset/hero image.png">
    </div>

    <div id="about">
        <h2>ABOUT US</h2>

        <P>SPYY-O adalah Toko Permainan Tradisional yang menjual produk yoyo yang terdiri dari 3 ukuran yaitu small, medium dan large
            </P>
      </div>

 <div id="product">
    <h2>OUR PRODUCT</h2>
    <div class="card-product">


      <div class="card">
        <img src="asset/images (1).jpg" alt="Yoyo" style="width:100%">
        <h1>Yoyo</h1>
        <p>Permainan yoyo adalah permainan yang memanfaatkan mainan yo-yo, yang terdiri dari dua cakram yang terhubung oleh sebuah sumbu dan tali yang melilit di sekitar sumbu. Yoyo dimainkan dengan melemparkan yoyo ke bawah, lalu menariknya kembali dengan tali untuk memutar yoyo. Ada berbagai teknik dan trik yang bisa dilakukan dengan yoyo, mulai dari trik dasar hingga trik yang lebih kompleks.  </p>
        <p><button>LIHAT</button></p>
      </div>

    </div>
  </div>


  <div id="contact">
    <div class="contact-text">
      <h4>CONTACT US</h4>
      <p>Get in touch with us</p>
      <a href="#"><button>Connect WA</button></a>
    </div>
    <div class="contact-image">
      <img src="./asset/images.jpg" alt="Contact Image">
    </div>
  </div>

<footer>
    <p>2025, copyright by Abby Online Shop.</p>
</footer>

</body>
</html>